-->
Kode CSS Font Awesome

Kode CSS Font Awesome

Kode CSS Font Awesome adalah kode dasar yang berisi kode-kode icon unik yang digunakan untuk segala keperluan blog atau website anda. Dengan menggunakan kode font awesome ini tampilan blog menjadi lebih bagus, lebih rapi dan menjadi unik serta menjadi lebih indah. Seandainya font awesome ini tidak ada mungkin para blogger masih menggunakan kode dasar dari icon atau simbol-simbol Html

Kode CSS Font Awesome

Kode-kode dasar dari icon atau simbol Html yaitu « menggunakan kode « , » menggunakan kode » , ↵ menggunakan kode ↵ , ← menggunakan kode ← , → menggunakan kode → , ↔ menggunakan kode ↔ , ↑ menggunakan kode ↑ , ↓ menggunakan kode ↓

Setelah munculnya font awesome, semua kode dasar tersebut akhirnya tergantikan dengan kode-kode yang lebih bagus dan memiliki banyak vearianya, seperti , , , , adalah simbol atau icon yang menggunakan kode perintah dari <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> , <i class="fa fa-long-arrow-right" aria-hidden="true"></i> , <i class="fa fa-arrow-right" aria-hidden="true"></i> , <i class="fa fa-angle-double-left" aria-hidden="true"></i> , <i class="fa fa-angle-down" aria-hidden="true"></i>

Namun sebelum adanya kode font awesome seperti yang tertulis diatas, font awesome sendiri pada awalnya menggunakan kode dasar juga yaitu
"\f0d7" untuk kode , "\f0d8" untuk kode , "\f0d9" untuk kode , "\f0da" untuk kode , "\f0dc" untuk kode , "\f0dd" untuk kode , "\f0de" untuk kode , "\f0e0" untuk kode , "\f0e1" untuk kode

Kode CSS Font Awesome

Untuk kode CSS font awesome secara lengkap bisa anda lihat dibawah ini:
  • "\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"

Untuk icon yang lebih lengkap lagi silahkan cek di http://fontawesome.io/icons/

Cara menggunakan kode CSS font Awesome

.element {
    position: relative;
}
.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Kode CSS font awesome ini hanya ulasan saja kalay kehadiran font awesome telah merubah beberapa penggunaan kode dasar dari icon Html yang sudah ada sebelumnya. Dan tentunya kode dari icon font awesome ini lebih lengkap


1:24:00 PM 

Next Post
Previous Post
Blogger
Disqus
Pilih Sistem Komentar

No comments