List lengkap icon Fon Awesome dan Menggunakan di Blog

Bagaimana menambahkan dan menggunakan Font Awesome icons di Blog Blogger - Font Awesome adalah kumpulan icon dan  tombol yang berbasis font. Jadi, ketika kita membutuhkan ikon di blog, tidak lagi menggunakan gambar / image yang tentunya akan lebih mempercepat loading blog.


Untuk bisa menggunakan Font Awesome ini, kita harus menyimpan CSSnya di atas </head>

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

Cara Menggunakan Font Awesome

Untuk menggunakan Font Awesome, kita harus menambahkan tag <i> kemudian class nya gunakan nama icon.

cara penulisannya :

<i class="icon-google-plus-sign"></i>

cara penulisannya :

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

Memperbesar Ukuran

<i class="icon-google-plus-sign"></i>
<i class="icon-google-plus-sign icon-large"></i>
<i class="icon-google-plus-sign icon-2x"></i>
<i class="icon-google-plus-sign icon-3x"></i>
<i class="icon-google-plus-sign icon-4x"></i>

Bordered & Pulled Icons

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-border untuk membuat kotak diluar icon bendera. Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.

<i class="icon-flag icon-3x pull-left icon-border"></i>Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-border untuk membuat kotak diluar icon bendera.  Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.

<i class="icon-quote-left icon-4x pull-left icon-muted"></i>Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.

Animated Spinner

Untuk membuat ikon berputar, seperti animasi loading gunakan kode icon-spin bagus digunakan pada icon-spinner dan icon-refresh

   Ini contoh icon-spinner yang diputar.

<i class="icon-spinner icon-spin icon-2x"></i> Ini contoh <code>icon-spinner</code> yang diputar.

Rotated & Flipped

Ikon juga dapat diputar dengan menentukan derajat putaran, juga bisa dibalik secara vertikal atau horizontal.

  ikon normal
  ikon diputar 90 derajat
  ikon diputar 180 derajat
  ikon diputar 270 derajat
  ikon dibalik secara horizontal
  ikon dibalik secara vertikal

<i class="icon-shield"></i>  ikon normal
<i class="icon-shield icon-rotate-90"></i>  ikon diputar 90 derajat
<i class="icon-shield icon-rotate-180"></i>  ikon diputar 180 derajat
<i class="icon-shield icon-rotate-270"></i>  ikon diputar 270 derajat
<i class="icon-shield icon-flip-horizontal"></i>  ikon dibalik secara horizontal
<i class="icon-shield icon-flip-vertical"></i>  ikon dibalik secara vertikal

Stacked Icons

Ikon juga dapat ditumpuk, Gunakan kode icon-stack sebelum tag ikon, dan kode icon-stack-base sebagai background / di bawah.

icon-twitter di atas icon-check-empty
icon-flag di atas icon-circle

<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i><i class="icon-twitter"></i></span><span style="margin-left: 8px;">icon-twitter di atas icon-check-empty
</span>
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i><i class="icon-flag icon-light"></i></span><span style="margin-left: 8px;">icon-flag di atas icon-circle
</span>

Button

Icon juga dapat diterapkan pada button / tombol.

•  Reload
 
•  Checkout
 
•  Info
 
•  Delete

<ul class="button">
<li><a class="btn1" href="#"><i class="icon-repeat"></i> Reload</a></li>
<li><a class="btn2" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a></li>
<li><a class="btn2" href="#"><i class="icon-info-sign"></i> Info</a></li>
<li><a class="btn1" href="#"><i class="icon-trash icon-large"></i> Delete</a></li>
</ul>

Bukan hanya pada button, icon Font Awesome ini bisa disimpan di berbagai tempat, seperti menu, menu dropdown, form, dan-lain-lain...

Penambahan Efek

Ikon Font Awesome juga bisa dikombinasikan dengan efek yang lainnya, seperti rotation pada contoh di bawah, silahkan arahkan mouse pada logo twitter :

Untuk CSS dan HTMLnya silahkan diacak2 sendiri sob.... Semoga bermanfaat, dan slamat berkreasi....

Berikut list lengkap icon Fon Awesome beserta Value Contentnya. Selain cara yang disebutkan sebelumnya, Font Awesome icon juga bisa disisipkan dengan pseudo elemen :before.

Untuk menambahkan icon Font Awesome pada pseudo elemen :before, tentunya sobat harus mengetahui value content dari icon tersebut. Contoh penggunaan :

.element {
    position: relative;
}
 
/*ganti conten value sesuai
dengan icon yang diperlukan*/
 
.element:before {
    content: "\f000"; 
    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 ini list lengkap icon Font Awesome dan CSS value content

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"

Resource : http://astronautweb.co/snippet/font-awesome/ - http://fortawesome.github.io/Font-Awesome/icons/ - http://blog.kangismet.net/2013/06/daftar-icon-font-awesome-lengkap-dan-css-content-value.html