Font Awesome

Kumpulan Icons Font Awesome - Font Awesome merupakan kumpulan icon dan tombol yang berbasis font. Artinya, ketika Anda membutuhkan ikon di blog, Anda tidak pelu menggunakan gambar / image apapun tapi cukup menggunakan fonts yang telah berbentuk icon-icon menarik sehingga dengan penggunaan font icons ini akan lebih mempercepat loading blog

Untuk menggunakan font awesome ini , silahkan salin kode berikut sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Penulisan Icons Font Awesome kedalam Artikel Blog
Untuk menulis font icon kedalam artikel blog dengan menggunakan tag i dan atribut class
Contoh:
Anda akan membuat icon buku (icon-book)

Maka penulisannya adalah sebagai berikut

<i class="icon-book"></i>

Untuk memperbesar ukuran font icon, menggunakan kode seperti berikut ini
Contoh:

Makan penulisannya sebagai berikut

<i class="icon-book"></i>
<i class="icon-book icon-large"></i>
<i class="icon-book icon-2x"></i>
<i class="icon-book icon-3x"></i>
<i class="icon-book icon-4x"></i>

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"; /* "\f00" merupakan salah satu kode icons font, ganti kode tersebut 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;
}

Berikut Kumpulan Icons Font Awesome

Icon Aplikasi Website

icon-adjust "\f042"
icon-anchor "\f13d"
icon-asterisk "\f069"
icon-ban-circle "\f05e"
icon-bar-chart "\f080"
icon-barcode "\f02a"
icon-beaker "\f0c3"
icon-beer "\f0fc"
icon-bell "\f0a2"
icon-bell-alt "\f0f3"
icon-bolt "\f0e7"
icon-book "\f02d"
icon-bookmark "\f02e"
icon-bookmark-empty "\f097"
icon-briefcase "\f0b1"
icon-bullhorn "\f0a1"
icon-bullseye "\f140"
icon-calendar "\f073"
icon-calendar-empty "\f133"
icon-camera "\f030"
icon-camera-retro "\f083"
icon-certificate "\f0a3"
icon-check-empty "\f096"
icon-check-minus "\f147"
icon-check-sign "\f14a"
icon-check "\f046"
icon-circle "\f111"
icon-circle-blank "\f10c"
icon-cloud "\f0c2"
icon-cloud-download "\f0ed"
icon-cloud-upload "\f0ee"
icon-code "\f121"
icon-code-fork "\f126"
icon-coffee "\f0f4"
icon-cog "\f013"
icon-cogs "\f085"
icon-collapse-alt "\f117"
icon-comment "\f075"
icon-comments "\f086"
icon-comments-alt "\f0e6"
icon-credit-card "\f09d"
icon-crop "\f125"
icon-dashboard "\f0e4"
icon-desktop "\f108"
icon-download "\f01a"
icon-download-alt "\f019"
icon-edit "\f044"
icon-edit-sign "\f14b"
icon-ellipsis-horizontal "\f141"
icon-ellipsis-vertical "\f142"
icon-envelope "\f003"
icon-envelope-alt "\f0e0"
icon-eraser "\f12d"
icon-exchange "\f0ec"
icon-exclamation "\f12a"
icon-exclamation-sign "\f06a"
icon-expand-alt "\f116"
icon-external-link "\f08e"
icon-external-link-sign "\f14c"
icon-eye-open "\f06e"
icon-eye-close "\f070"
icon-facetime-video "\f03d"
icon-fighter-jet "\f0fb"
icon-film "\f008"
icon-filter "\f0b0"
icon-fire-extinguisher "\f134"
icon-fire "\f06d"
icon-flag-alt "\f11d"
icon-flag-checkered "\f11e"
icon-folder-close "\f07b"
icon-folder-open "\f07c"
icon-folder-close-alt "\f114"
icon-folder-open-alt "\f115"
icon-food "\f0f5"
icon-frown "\f119"
icon-gamepad "\f11b"
icon-gift "\f06b"
icon-glass "\f000"
icon-globe "\f0ac"
icon-group "\f0c0"
icon-hdd "\f0a0"
icon-headphones "\f025"
icon-heart-empty "\f08a"
icon-heart "\f004"
icon-home "\f015"
icon-inbox "\f01c"
icon-info-sign "\f05a"
icon-info "\f129"
icon-key "\f084"
icon-keyboard "\f11c"
icon-laptop "\f109"
icon-leaf "\f06c"
icon-legal "\f0e3"
icon-lemon "\f094"
icon-level-up "\f148"
icon-level-down "\f149"
icon-lightbulb "\f0eb"
icon-location-arrow "\f124"
icon-lock "\f023"
icon-magic "\f0d0"
icon-magnet "\f076"
icon-mail-reply "\f112"
icon-mail-reply-all "\f122"
icon-mail-forward "\ff064"
icon-map-marker "\f041"
icon-meh "\f11a"
icon-microphone "\f130"
icon-microphone-off "\f131"
icon-minus "\f068"
icon-minus-sign "\f056"
icon-minus-sign-alt "\f146"
icon-mobile-phone "\f10b"
icon-money "\f0d6"
icon-move "\f047"
icon-music "\f001"
icon-off "\f011"
icon-ok "\f00c"
icon-ok-sign "\f058"
icon-ok-circle "\f05d"
icon-pencil "\f040"
icon-phone "\f095"
icon-phone-sign "\f098"
icon-picture "\f03e"
icon-plane "\f072"
icon-google-plus-sign "\f0d4"
icon-google-plus "\f0d5"
icon-print "\f02f"
icon-pushpin "\f08d"
icon-puzzle-piece "\f12e"
icon-qrcode "\f029"
icon-question-sign "\f059"
icon-question "\f128"
icon-quote-left "\f10d"
icon-quote-right "\f10e"
icon-random "\f074"
icon-refresh "\f021"
icon-remove-sign "\f057"
icon-remove-circle "\f05c"
icon-remove "\f00d"
icon-reorder "\f0c9"
icon-reply "\f112"
icon-reply-all "\f122"
icon-resize-vertical "\f07d"
icon-resize-horizontal "\f07e"
icon-retweet "\f079"
icon-road "\f018"
icon-rocket "\f135"
rotate-left "\f0e2"
rotate-right "\f01e"
icon-rss "\f09e"
icon-rss-sign "\f143"
icon-screenshot "\f05b"
icon-search "\f002"
icon-share "\f045"
icon-share-alt "\f064"
icon-share-sign "\f14d"
icon-shield "\f132"
icon-shopping-cart "\f07a"
icon-sign-blank "\f0c8"
icon-signal "\f012"
icon-signin "\f090"
icon-signout "\f08b"
icon-sitemap "\f0e8"
icon-smile "\f118"
icon-sort "\f0dc"
icon-sort-down "\f0dd"
icon-sort-up "\f0de"
icon-spinner "\f110"
icon-star "\f005"
icon-star-empty "\f006"
icon-star-half-full "\f123"
icon-star-half-empty "\f123"
icon-suitcase "\f0f2"
icon-tablet "\f10a"
icon-tag "\f02b"
icon-tags "\f02c"
icon-tasks "\f0ae"
icon-terminal "\f120"
icon-thumbs-up "\f087"
icon-thumbs-down "\f088"
icon-ticket "\f145"
icon-time "\f017"
icon-tint "\f043"
icon-trash "\f014"
icon-trophy "\f091"
icon-truck "\f0d1"
icon-umbrella "\f0e9"
icon-unlock "\f09c"
icon-unlock-alt "\f13e"
icon-upload "\f01b"
icon-upload-alt "\f093"
icon-user-md "\f0f0"
icon-user "\f007"
icon-volume-off "\f026"
icon-volume-down "\f027"
icon-volume-up "\f028"
icon-warning-sign "\f071"
icon-wrench "\f0ad"
icon-zoom-in "\f00e"
icon-zoom-out "\f010"

Icon Teks Editor

icon-file "\f016"
icon-file-alt "\f0f6"
icon-cut "\f0c4"
icon-copy "\f0c5"
icon-paste "\f0ea"
icon-save "\f0c7"
icon-undo "\f0e2"
icon-repeat "\f01e"
icon-text-height "\f034"
icon-text-width "\f035"
icon-align-left "\f036"
icon-align-center "\f037"
icon-align-right "\f038"
icon-align-justify "\f039"
icon-indent-left "\f03b"
icon-indent-right "\f03c"
icon-font "\f031"
icon-bold "\f032"
icon-italic "\f033"
icon-strikethrough "\f0cc"
icon-underline "\f0cd"
icon-superscript "\f12b"
icon-subscript "\f12c"
icon-link "\f0c1"
icon-unlink "\f127"
icon-paper-clip "\f0c6"
icon-eraser "\f12d"
icon-columns "\f0db"
icon-table "\f0ce"
icon-th "\f00a"
icon-th-list "\f00b"
icon-th-large "\f009"
icon-list "\f03a"
icon-list-ul "\f0ca"
icon-list-ol "\f0cb"
icon-list-alt "\f022"

Icon Penunjuk

icon-angle-left "\f104"
icon-angle-right "\f105"
icon-angle-up "\f106"
icon-angle-down "\f107"
icon-arrow-left "\f060"
icon-arrow-right "\f061"
icon-arrow-up "\f062"
icon-arrow-down "\f063"
icon-caret-down "\f0d7"
icon-caret-up "\f0d8"
icon-caret-left "\f0d9"
icon-caret-right "\f0da"
icon-chevron-left "\f053"
icon-chevron-right "\f054"
icon-chevron-up "\f077"
icon-chevron-down "\f078"
icon-chevron-sign-left "\f137"
icon-chevron-sign-right "\f138"
icon-chevron-sign-up "\f139"
icon-chevron-sign-down "\f13a"
icon-circle-arrow-left "\f0a8"
icon-circle-arrow-right "\f0a9"
icon-circle-arrow-up "\f0aa"
icon-circle-arrow-down "\f0ab"
icon-double-angle-left "\f100"
icon-double-angle-right "\f101"
icon-double-angle-up "\f102"
icon-double-angle-down "\f103"
icon-hand-right "\f0a4"
icon-hand-left "\f0a5"
icon-hand-up "\f0a6"
icon-hand-down "\f0a7"

Icon Video Player

icon-play "\f04b"
icon-play-sign "\f144"
icon-play-circle "\f01d"
icon-pause "\f04c"
icon-stop "\f04d"
icon-eject "\f052"
icon-forward "\f04e"
icon-fast-forward "\f050"
icon-step-backward "\f048"
icon-step-forward "\f051"
icon-fullscreen "\f0b2"
icon-resize-full "\f065"
icon-resize-small "\f066"

Icon Merk

icon-css3 "\f13c"
icon-facebook-sign "\f082"
icon-facebook "\f09a"
icon-twitter-sign "\f081"
icon-twitter "\f099"
icon-github "\f09b"
icon-github-sign "\f092"
icon-html5 "\f13b"
icon-linkedin "\f0e1"
icon-linkedin-sign "\f08c"
icon-maxcdn "\f136"
icon-pinterest "\f0d2"
icon-pinterest-sign "\f0d3"
icon-google-plus "\f0d5"
icon-google-plus-sign "\f0d4"

Icon Kedokteran

icon-ambulance "\f0f9"
icon-beaker "\f0c3"
icon-h-sign "\f0fd"
icon-hospital "\f0f8"
icon-medkit "\f0fa"
icon-plus-sign-alt "\f0fe"
icon-stethoscope "\f0f1"
icon-user-md "\f0f0"

Posting Komentar

Semua umpan balik saya hargai dan saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin.

1. Komentar SPAM akan dihapus segera setelah saya review
2. Pastikan untuk klik "Berlangganan Lewat Email" untuk membangun kreatifitas blog ini
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana.
4. Jangan Tambah Link ke tubuh komentar Anda karena saya memakai system link exchange
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.

Bila anda senang dengan artikel ini silahkan Join To Blog atau berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas diatas untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan Kontak Saya atau melalui komentar di bawah ini.

Gudang Template