List CSS icon font awesome untuk blog / website - BBT: List icon font awesome dan cara penggunaan font awesome pada css atau secara langsung di blog / website

List CSS icon font awesome untuk blog / website

Font Awesome adalah font web yang berisi kumpulan icon, sehingga ketika ingin menggunakan icon-icon tertentu kita tidak perlu menggunakan gambar dengan cara mengupload gambar tersebut ke blog, cukup menggunakan font awesome saja.
List CSS icon font awesome untuk blog / website
Saat saya menulis ini, font awesome berada pada versi 4.2.0 (Font-Awesome 4.2.0).
Untuk menggunakannya sobat harus memasang css font awesome pada blog / website, jika sobat ingin menggunakan font awesome ini silakan download secara gratis di www.fontawesome.io atau pasang kode berikut di template yang sobat gunakan sebelum kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
Cara menampilkan icon dari font awesome ini kita hanya menggunakan elemen <i> pada blog atau website, contoh penggunaan font awesome langsung di dalam tulisan:
<div>
<a href="http://www.blogbacatulis.com/"><i class="fa fa-home fa-fw"></i> Home</a>
<a href="http://www.blogbacatulis.com/p/tentang.html"><i class="fa fa-user fa-fw"></i> About</a>
</div>
Bagian ini (<i class="fa fa-home fa-fw"></i> dan <i class="fa fa-user fa-fw"></i>) adalah kode icon, Maka hasilnya akan terlihat seperti ini :
Sobat juga bisa menggunakan font awesome pada css, contoh penggunaan font awesome di dalam css:
Kode CSS :
.pensil{color:#f16529;}
.pensil:before{color:#f16529;content: "\f040 ";font-family: fontawesome;margin:07px 0 0}
Cara penulisan di blog
<span class="pensil">Pensil</span>
Maka hasilnya akan seperti ini :
Pensil
Yang perlu sobat perhatikan adalah bagian yang (pensil) sedangkan kode (\f040)  yang ada di css adalah kode icon pensil, berikut kode icon untuk css yang bisa sobat gunakan.

List CSS icon font awesome Value Content

fa-glass"\f000" fa-music"\f001"
fa-search"\f002" fa-envelope-o"\f003"
fa-heart"\f004" fa-star"\f005"
fa-star-o"\f006" fa-user"\f007"
fa-film"\f008" fa-th-large"\f009"
fa-th"\f00a" fa-th-list"\f00b"
fa-check"\f00c" fa-times"\f00d"
fa-search-plus"\f00e" fa-search-minus"\f010"
fa-power-off"\f011" fa-signal"\f012"
fa-cog"\f013" fa-trash-o"\f014"
fa-home"\f015" fa-file-o"\f016"
fa-clock-o"\f017" fa-road"\f018"
fa-download"\f019" fa-arrow-circle-o-down"\f01a"
fa-arrow-circle-o-up"\f01b" fa-inbox"\f01c"
fa-play-circle-o"\f01d" fa-repeat"\f01e"
fa-refresh"\f021" fa-list-alt"\f022"
fa-lock"\f023" fa-flag"\f024"
fa-headphones"\f025" fa-volume-off"\f026"
fa-volume-down"\f027" fa-volume-up"\f028"
fa-qrcode"\f029" fa-barcode"\f02a"
fa-tag"\f02b" fa-tags"\f02c"
fa-book"\f02d" fa-bookmark"\f02e"
fa-print"\f02f" fa-camera"\f030"
fa-font"\f031" fa-bold"\f032"
fa-itatrc"\f033" fa-text-height"\f034"
fa-text-width"\f035" fa-align-left"\f036"
fa-atrgn-center"\f037" fa-align-right"\f038"
fa-atrgn-justify"\f039" fa-list"\f03a"
fa-outrent"\f03b" fa-indent"\f03c"
fa-video-camera"\f03d" fa-picture-o"\f03e"
fa-pencil"\f040" fa-map-marker"\f041"
fa-adjust"\f042" fa-tint"\f043"
fa-pencil-square-o"\f044" fa-share-square-o"\f045"
fa-check-square"\f14a" fa-pencil-square"\f14b"
fa-external-link-square"\f14c" fa-share-square"\f14d"
fa-compass"\f14e" fa-caret-square-o-down"\f150"
fa-caret-square-o-up"\f151" fa-caret-square-o-right"\f152"
fa-eur"\f153" fa-gbp"\f154"
fa-usd"\f155" fa-inr"\f156"
fa-jpy"\f157" fa-rub"\f158"
fa-krw"\f159" fa-btc"\f15a"
fa-file"\f15b" fa-file-text"\f15c"
fa-sort-alpha-asc"\f15d" fa-sort-alpha-desc"\f15e"
fa-sort-amount-asc"\f160" fa-sort-amount-desc"\f161"
fa-sort-numeric-asc"\f162" fa-sort-numeric-desc"\f163"
fa-thumbs-up"\f164" fa-thumbs-down"\f165"
fa-youtube-square"\f166" fa-youtube"\f167"
fa-xing"\f168" fa-xing-square"\f169"
fa-youtube-play"\f16a" fa-dropbox"\f16b"
fa-stack-overflow"\f16c" fa-instagram"\f16d"
fa-flickr"\f16e" fa-adn"\f170"
fa-bitbucket"\f171" fa-bitbucket-square"\f172"
fa-tumblr"\f173" fa-tumblr-square"\f174"
fa-long-arrow-down"\f175" fa-long-arrow-up"\f176"
fa-long-arrow-left"\f177" fa-long-arrow-right"\f178"
fa-apple"\f179" fa-windows"\f17a"
fa-android"\f17b" fa-linux"\f17c"
fa-dribbble"\f17d" fa-skype"\f17e"
fa-foursquare"\f180" fa-trello"\f181"
fa-female"\f182" fa-male"\f183"
fa-gittip"\f184" fa-sun-o"\f185"
fa-moon-o"\f186" fa-archive"\f187"
fa-bug"\f188" fa-vk"\f189"
fa-weibo"\f18a" fa-renren"\f18b"
fa-pagelines"\f18c" fa-stack-exchange"\f18d"
fa-arrow-circle-o-right"\f18e" fa-arrow-circle-o-left"\f190"
fa-caret-square-o-left"\f191" fa-dot-circle-o"\f192"
fa-wheelchair"\f193" fa-vimeo-square"\f194"
fa-try"\f195" fa-plus-square-o"\f196"
fa-space-shuttle"\f197" fa-slack"\f198"
fa-envelope-square"\f199" fa-wordpress"\f19a"
fa-openid"\f19b" fa-university"\f19c"
fa-graduation-cap"\f19d" fa-yahoo"\f19e"
fa-google"\f1a0" fa-reddit"\f1a1"
fa-reddit-square"\f1a2" fa-stumbleupon-circle"\f1a3"
fa-stumbleupon"\f1a4" fa-delicious"\f1a5"
fa-digg"\f1a6" fa-pied-piper"\f1a7"
fa-pied-piper-alt"\f1a8" fa-drupal"\f1a9"
fa-joomla"\f1aa" fa-language"\f1ab"
fa-fax"\f1ac" fa-building"\f1ad"
fa-child"\f1ae" fa-paw"\f1b0"
fa-spoon"\f1b1" fa-cube"\f1b2"
fa-cubes"\f1b3" fa-behance"\f1b4"
fa-behance-square"\f1b5" fa-steam"\f1b6"
fa-steam-square"\f1b7" fa-recycle"\f1b8"
fa-car"\f1b9" fa-taxi"\f1ba"
fa-tree"\f1bb" fa-spotify"\f1bc"
fa-deviantart"\f1bd" fa-soundcloud"\f1be"
fa-database"\f1c0" fa-file-pdf-o"\f1c1"
fa-file-word-o"\f1c2" fa-file-excel-o"\f1c3"
fa-file-powerpoint-o"\f1c4" fa-file-image-o"\f1c5"
fa-file-archive-o"\f1c6" fa-file-audio-o"\f1c7"
fa-file-video-o"\f1c8" fa-file-code-o"\f1c9"
fa-vine"\f1ca" fa-codepen"\f1cb"
fa-jsfiddle"\f1cc" fa-life-ring"\f1cd"
fa-circle-o-notch"\f1ce" fa-rebel"\f1d0"
fa-empire"\f1d1" fa-git-square"\f1d2"
fa-git"\f1d3" fa-hacker-news"\f1d4"
fa-tencent-weibo"\f1d5" fa-qq"\f1d6"
fa-weixin"\f1d7" fa-paper-plane"\f1d8"
fa-paper-plane-o"\f1d9" fa-history"\f1da"
fa-circle-thin"\f1db" fa-header"\f1dc"
fa-paragraph"\f1dd" fa-sliders"\f1de"
fa-share-alt"\f1e0" fa-share-alt-square"\f1e1"
fa-bomb"\f1e2" fa-futbol-o"\f1e3"
fa-tty"\f1e4" fa-binoculars"\f1e5"
fa-plug"\f1e6" fa-slideshare"\f1e7"
fa-twitch"\f1e8" fa-yelp"\f1e9"
fa-newspaper-o"\f1ea" fa-wifi"\f1eb"
fa-calculator"\f1ec" fa-paypal"\f1ed"
fa-google-wallet"\f1ee" fa-cc-visa"\f1f0"
fa-cc-mastercard"\f1f1" fa-cc-discover"\f1f2"
fa-cc-amex"\f1f3" fa-cc-paypal"\f1f4"
fa-cc-stripe"\f1f5" fa-bell-slash"\f1f6"
fa-bell-slash-o"\f1f7" fa-trash"\f1f8"
fa-copyright"\f1f9" fa-at"\f1fa"
fa-eyedropper"\f1fb" fa-paint-brush"\f1fc"
fa-birthday-cake"\f1fd" fa-area-chart"\f1fe"
fa-pie-chart"\f200" fa-line-chart"\f201"
fa-lastfm"\f202" fa-lastfm-square"\f203"
fa-toggle-off"\f204" fa-toggle-on"\f205"
fa-bicycle"\f206" fa-bus"\f207"
fa-ioxhost"\f208" fa-angellist"\f209"
fa-cc"\f20a" fa-ils"\f20b"
fa-meanpath"\f20c"
Nah itulah list kode css icon font awesome.
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang List CSS icon font awesome untuk blog / website yang ada di blog ini bermanfaat buat sobat