Font Awesome

Menggunakan Icons Font Awesome Kedalam Kode CSS Template Blog

Sealin bisa digunakan secara langsung kedalam teks atau artikel blog, font icon ini bisa juga digunakan kedalam kode css template. Untuk menggunakan font icon ini, harus ada penambahan atribut :before (pseudo elemen)

Contoh penggunaan icons font awesome didalam css dengan fungsi:before

.element {
    position: relative;
}
.element:before {
    content: "\f000"; /* "\f000" dapat Anda ganti dengan icons font dibawah ini*/
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--sesuaikan sebagai tambahan--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

List Icon Font Awesome

• "\f000"
• "\f001"
• "\f002"
• "\f003"
• "\f004"
• "\f005"
• "\f006"
• "\f007"
• "\f008"
• "\f009"
• "\f00a"
• "\f00b"
• "\f00c"
• "\f00d"
• "\f00e"
• "\f010"
• "\f011"
• "\f012"
• "\f013"
• "\f014"
• "\f015"
• "\f016"
• "\f017"
• "\f018"
• "\f019"
• "\f01a"
• "\f01b"
• "\f01c"
• "\f01d"
• "\f01e"
• "\f021"
• "\f022"
• "\f023"
• "\f024"
• "\f025"
• "\f026"
• "\f027"
• "\f028"
• "\f029"
• "\f02a"
• "\f02b"
• "\f02c"
• "\f02d"
• "\f02e"
• "\f02f"
• "\f030"
• "\f031"
• "\f032"
• "\f033"
• "\f034"
• "\f035"
• "\f036"
• "\f037"
• "\f038"
• "\f039"
• "\f03a"
• "\f03b"
• "\f03c"
• "\f03d"
• "\f03e"
• "\f040"
• "\f041"
• "\f042"
• "\f043"
• "\f044"
• "\f045"
• "\f046"
• "\f047"
• "\f048"
• "\f049"
• "\f04a"
• "\f04b"
• "\f04c"
• "\f04d"
• "\f04e"
• "\f050"
• "\f051"
• "\f052"
• "\f053"
• "\f054"
• "\f055"
• "\f056"
• "\f057"
• "\f058"
• "\f059"
• "\f05a"
• "\f05b"
• "\f05c"
• "\f05d"
• "\f05e"
• "\f060"
• "\f061"
• "\f062"
• "\f063"
• "\f064"
• "\f065"
• "\f066"
• "\f067"
• "\f068"
• "\f069"
• "\f06a"
• "\f06b"
• "\f06c"
• "\f06d"
• "\f06e"
• "\f070"
• "\f071"
• "\f072"
• "\f073"
• "\f074"
• "\f075"
• "\f076"
• "\f077"
• "\f078"
• "\f079"
• "\f07a"
• "\f07b"
• "\f07c"
• "\f07d"
• "\f07e"
• "\f080"
• "\f081"
• "\f082"
• "\f083"
• "\f084"
• "\f085"
• "\f086"
• "\f087"
• "\f088"
• "\f089"
• "\f08a"
• "\f08b"
• "\f08c"
• "\f08d"
• "\f08e"
• "\f090"
• "\f091"
• "\f092"
• "\f093"
• "\f094"
• "\f095"
• "\f096"
• "\f097"
• "\f098"
• "\f099"
• "\f09a"
• "\f09b"
• "\f09c"
• "\f09d"
• "\f09e"
• "\f0a0"
• "\f0a1"
• "\f0f3"
• "\f0a3"
• "\f0a4"
• "\f0a5"
• "\f0a6"
• "\f0a7"
• "\f0a8"
• "\f0a9"
• "\f0aa"
• "\f0ab"
• "\f0ac"
• "\f0ad"
• "\f0ae"
• "\f0b0"
• "\f0b1"
• "\f0b2"
• "\f0c0"
• "\f0c1"
• "\f0c2"
• "\f0c3"
• "\f0c4"
• "\f0c5"
• "\f0c6"
• "\f0c7"
• "\f0c8"
• "\f0c9"
• "\f0ca"
• "\f0cb"
• "\f0cc"
• "\f0cd"
• "\f0ce"
• "\f0d0"
• "\f0d1"
• "\f0d2"
• "\f0d3"
• "\f0d4"
• "\f0d5"
• "\f0d6"
• "\f0d7"
• "\f0d8"
• "\f0d9"
• "\f0da"
• "\f0db"
• "\f0dc"
• "\f0dd"
• "\f0de"
• "\f0e0"
• "\f0e1"
• "\f0e2"
• "\f0e3"
• "\f0e4"
• "\f0e5"
• "\f0e6"
• "\f0e7"
• "\f0e8"
• "\f0e9"
• "\f0ea"
• "\f0eb"
• "\f0ec"
• "\f0ed"
• "\f0ee"
• "\f0f0"
• "\f0f1"
• "\f0f2"
• "\f0a2"
• "\f0f4"
• "\f0f5"
• "\f0f6"
• "\f0f7"
• "\f0f8"
• "\f0f9"
• "\f0fa"
• "\f0fb"
• "\f0fc"
• "\f0fd"
• "\f0fe"
• "\f100"
• "\f101"
• "\f102"
• "\f103"
• "\f104"
• "\f105"
• "\f106"
• "\f107"
• "\f108"
• "\f109"
• "\f10a"
• "\f10b"
• "\f10c"
• "\f10d"
• "\f10e"
• "\f110"
• "\f111"
• "\f112"
• "\f113"
• "\f114"
• "\f115"
• "\f118"
• "\f119"
• "\f11a"
• "\f11b"
• "\f11c"
• "\f11d"
• "\f11e"
• "\f120"
• "\f121"
• "\f122"
• "\f123"
• "\f124"
• "\f125"
• "\f126"
• "\f127"
• "\f128"
• "\f129"
• "\f12a"
• "\f12b"
• "\f12c"
• "\f12d"
• "\f12e"
• "\f130"
• "\f131"
• "\f132"
• "\f133"
• "\f134"
• "\f135"
• "\f136"
• "\f137"
• "\f138"
• "\f139"
• "\f13a"
• "\f13b"
• "\f13c"
• "\f13d"
• "\f13e"
• "\f140"
• "\f141"
• "\f142"
• "\f143"
• "\f144"
• "\f145"
• "\f146"
• "\f147"
• "\f148"
• "\f149"
• "\f14a"
• "\f14b"
• "\f14c"
• "\f14d"
• "\f14e"
• "\f150"
• "\f151"
• "\f152"
• "\f153"
• "\f154"
• "\f155"
• "\f156"
• "\f157"
• "\f158"
• "\f159"
• "\f15a"
• "\f15b"
• "\f15c"
• "\f15d"
• "\f15e"
• "\f160"
• "\f161"
• "\f162"
• "\f163"
• "\f164"
• "\f165"
• "\f166"
• "\f167"
• "\f168"
• "\f169"
• "\f16a"
• "\f16b"
• "\f16c"
• "\f16d"
• "\f16e"
• "\f170"
• "\f171"
• "\f172"
• "\f173"
• "\f174"
• "\f175"
• "\f176"
• "\f177"
• "\f178"
• "\f179"
• "\f17a"
• "\f17b"
• "\f17c"
• "\f17d"
• "\f17e"
• "\f180"
• "\f181"
• "\f182"
• "\f183"
• "\f184"
• "\f185"
• "\f186"
• "\f187"
• "\f188"
• "\f189"
• "\f18a"
• "\f18b"
• "\f18c"
• "\f18d"
• "\f18e"
• "\f190"
• "\f191"
• "\f192"
• "\f193"
• "\f194"
• "\f195"
• "\f196"
• "\f197"
• "\f198"
• "\f199"
• "\f19a"
• "\f19b"
• "\f19c"
• "\f19d"
• "\f19e"
• "\f1a0"
• "\f1a1"
• "\f1a2"
• "\f1a3"
• "\f1a4"
• "\f1a5"
• "\f1a6"
• "\f1a7"
• "\f1a8"
• "\f1a9"
• "\f1aa"
• "\f1ab"
• "\f1ac"
• "\f1ad"
• "\f1ae"
• "\f1b0"
• "\f1b1"
• "\f1b2"
• "\f1b3"
• "\f1b4"
• "\f1b5"
• "\f1b6"
• "\f1b7"
• "\f1b8"
• "\f1b9"
• "\f1ba"
• "\f1bb"
• "\f1bc"
• "\f1bd"
• "\f1be"
• "\f1c0"
• "\f1c1"
• "\f1c2"
• "\f1c3"
• "\f1c4"
• "\f1c5"
• "\f1c6"
• "\f1c7"
• "\f1c8"
• "\f1c9"
• "\f1ca"
• "\f1cb"
• "\f1cc"
• "\f1cd"
• "\f1ce"
• "\f1d0"
• "\f1d1"
• "\f1d2"
• "\f1d3"
• "\f1d4"
• "\f1d5"
• "\f1d6"
• "\f1d7"
• "\f1d8"
• "\f1d9"
• "\f1da"
• "\f1db"
• "\f1dc"
• "\f1dd"
• "\f1de"
• "\f1e0"
• "\f1e1"
• "\f1e2"
• "\f1e3"
• "\f1e4"
• "\f1e5"
• "\f1e6"
• "\f1e7"
• "\f1e8"
• "\f1e9"
• "\f1ea"
• "\f1eb"
• "\f1ec"
• "\f1ed"
• "\f1ee"
• "\f1f0"
• "\f1f1"
• "\f1f2"
• "\f1f3"
• "\f1f4"
• "\f1f5"
• "\f1f6"
• "\f1f7"
• "\f1f8"
• "\f1f9"
• "\f1fa"
• "\f1fb"
• "\f1fc"
• "\f1fd"
• "\f1fe"
• "\f200"
• "\f201"
• "\f202"
• "\f203"
• "\f204"
• "\f205"
• "\f206"
• "\f207"
• "\f208"
• "\f209"
• "\f20a"
• "\f20b"
• "\f20c"