Memasang Font Awesome di blog dapat membuat ikon menarik dengan menggunakan text sehingga tidak mempengaruhi kecepatan beban blog. Font awesome ini telah di buat untuk website apa saja dapat digunakan. Dengan ukuran yang kecil, mudah di ubah dan dapat diletakkan di berbagai tempat. Design yang baik sehingga membuat blog menjadi elegan.
Dengan adanya Font Awesome membuat Website anda menjadi menarik pengunjung dan juga tampilan design blog, menjadi lebih keren dengan adanya gambar icon Font Awesome.
Cara Memasang Font Awesome Di Blog
1. Login ke blogger anda dan klik menu Template > Edit Template
2. Tambahkan kode berikut di atas kode </head> atau </body>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
3. Simpan Template
Cara Menggunakan Font Awesome Di Blog
Anda dapat memasang font ini dimana saja, sesuai selera. Biasanya terpasang di menu dan posting. Untuk melihat type atau data dan librarynya, Lihat Halamannya disini. Untuk menampilkan font awesome ini dengan menggunakan tag <i> dan menambah class utama (fa) dan class untuk memanggil ikon.
Contoh di bawah ini, memanggil font home
<i class="fa fa-home"></i>Hasilnya
Untuk membuat font menjadi lebih besar anda dapat menambahkan fa-lg (33% increase), fa-2x, fa-3x, fa-4x, dan fa-5x. Contoh
<i class="fa fa-home fa-lg"></i> contoh ditambah : fa-lg <i class="fa fa-home fa-2x"></i> contoh ditambah fa-2x <i class="fa fa-home fa-3x"></i> contoh ditambah fa-3x <i class="fa fa-home fa-4x"></i> contoh ditambah fa-4x <i class="fa fa-home fa-5x"></i> contoh ditambah fa-5x
Hasilnya
ditambah fa-5x
Untuk menambahwarna style anda harus menggabungkan class CSS
Misalnya
<i class="fa fa-comments-o fa-4x"></i> contoh ditambah fa-4x <style> .fa-comments-o {padding:0; margin:0; float:left;padding:5px 0px; color:#F2784B;} } </style>
Hasilnya
Font Awesome Web (version 2)
1. Langkah pertama copy tag berikut dan pasang di bawah tag <head> atau di atas </head>
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
2. Tambahkan fa fa-example ke dalam <i class='fa fa example'></i>
Berikut tabel daftar Font Awesome (Fa Fa) Terbaru Komplit
Berikut tabel daftar Font Awesome (Fa Fa) Terbaru Komplit
| Icon | Description | Example |
|---|---|---|
| fa fa-adjust | Try it | |
| fa fa-american-sign-language-interpreting | Try it | |
| fa fa-anchor | Try it | |
| fa fa-archive | Try it | |
| fa fa-area-chart | Try it | |
| fa fa-arrows | Try it | |
| fa fa-arrows-h | Try it | |
| fa fa-arrows-v | Try it | |
| fa fa-asl-interpreting | Try it | |
| fa fa-assistive-listening-systems | Try it | |
| fa fa-asterisk | Try it | |
| fa fa-at | Try it | |
| fa fa-automobile | Try it | |
| fa fa-audio-description | Try it | |
| fa fa-balance-scale | Try it | |
| fa fa-ban | Try it | |
| fa fa-bank | Try it | |
| fa fa-bar-chart | Try it | |
| fa fa-bar-chart-o | Try it | |
| fa fa-barcode | Try it | |
| fa fa-bars | Try it | |
| fa fa-battery-0 | Try it | |
| fa fa-battery-1 | Try it | |
| fa fa-battery-2 | Try it | |
| fa fa-battery-3 | Try it | |
| fa fa-battery-4 | Try it | |
| fa fa-battery-empty | Try it | |
| fa fa-battery-full | Try it | |
| fa fa-battery-half | Try it | |
| fa fa-battery-quarter | Try it | |
| fa fa-battery-three-quarters | Try it | |
| fa fa-bed | Try it | |
| fa fa-beer | Try it | |
| fa fa-bell | Try it | |
| fa fa-bell-o | Try it | |
| fa fa-bell-slash | Try it | |
| fa fa-bell-slash-o | Try it | |
| fa fa-bicycle | Try it | |
| fa fa-binoculars | Try it | |
| fa fa-birthday-cake | Try it | |
| fa fa-blind | Try it | |
| fa fa-bolt | Try it | |
| fa fa-bomb | Try it | |
| fa fa-book | Try it | |
| fa fa-bookmark | Try it | |
| fa fa-bookmark-o | Try it | |
| fa fa-braille | Try it | |
| fa fa-briefcase | Try it | |
| fa fa-bug | Try it | |
| fa fa-building | Try it | |
| fa fa-building-o | Try it | |
| fa fa-bullhorn | Try it | |
| fa fa-bullseye | Try it | |
| fa fa-bus | Try it | |
| fa fa-cab | Try it | |
| fa fa-calculator | Try it | |
| fa fa-calendar | Try it | |
| fa fa-calendar-o | Try it | |
| fa fa-calendar-check-o | Try it | |
| fa fa-calendar-minus-o | Try it | |
| fa fa-calendar-plus-o | Try it | |
| fa fa-calendar-times-o | Try it | |
| fa fa-camera | Try it | |
| fa fa-camera-retro | Try it | |
| fa fa-car | Try it | |
| fa fa-caret-square-o-down | Try it | |
| fa fa-caret-square-o-left | Try it | |
| fa fa-caret-square-o-right | Try it | |
| fa fa-caret-square-o-up | Try it | |
| fa fa-cart-arrow-down | Try it | |
| fa fa-cart-plus | Try it | |
| fa fa-cc | Try it | |
| fa fa-certificate | Try it | |
| fa fa-check | Try it | |
| fa fa-check-circle | Try it | |
| fa fa-check-circle-o | Try it | |
| fa fa-check-square | Try it | |
| fa fa-check-square-o | Try it | |
| fa fa-child | Try it | |
| fa fa-circle | Try it | |
| fa fa-circle-o | Try it | |
| fa fa-circle-o-notch | Try it | |
| fa fa-circle-thin | Try it | |
| fa fa-clock-o | Try it | |
| fa fa-clone | Try it | |
| fa fa-close | Try it | |
| fa fa-cloud | Try it | |
| fa fa-cloud-download | Try it | |
| fa fa-cloud-upload | Try it | |
| fa fa-code | Try it | |
| fa fa-code-fork | Try it | |
| fa fa-coffee | Try it | |
| fa fa-cog | Try it | |
| fa fa-cogs | Try it | |
| fa fa-comment | Try it | |
| fa fa-comment-o | Try it | |
| fa fa-comments | Try it | |
| fa fa-comments-o | Try it | |
| fa fa-commenting | Try it | |
| fa fa-commenting-o | Try it | |
| fa fa-compass | Try it | |
| fa fa-copyright | Try it | |
| fa fa-credit-card | Try it | |
| fa fa-credit-card-alt | Try it | |
| fa fa-creative-commons | Try it | |
| fa fa-crop | Try it | |
| fa fa-crosshairs | Try it | |
| fa fa-cube | Try it | |
| fa fa-cubes | Try it | |
| fa fa-cutlery | Try it | |
| fa fa-dashboard | Try it | |
| fa fa-database | Try it | |
| fa fa-deaf | Try it | |
| fa fa-deafness | Try it | |
| fa fa-desktop | Try it | |
| fa fa-diamond | Try it | |
| fa fa-dot-circle-o | Try it | |
| fa fa-download | Try it | |
| fa fa-edit | Try it | |
| fa fa-ellipsis-h | Try it | |
| fa fa-ellipsis-v | Try it | |
| fa fa-envelope | Try it | |
| fa fa-envelope-o | Try it | |
| fa fa-envelope-square | Try it | |
| fa fa-eraser | Try it | |
| fa fa-exchange | Try it | |
| fa fa-exclamation | Try it | |
| fa fa-exclamation-circle | Try it | |
| fa fa-exclamation-triangle | Try it | |
| fa fa-external-link | Try it | |
| fa fa-external-link-square | Try it | |
| fa fa-eye | Try it | |
| fa fa-eye-slash | Try it | |
| fa fa-eyedropper | Try it | |
| fa fa-fax | Try it | |
| fa fa-female | Try it | |
| fa fa-fighter-jet | Try it | |
| fa fa-file-archive-o | Try it | |
| fa fa-file-audio-o | Try it | |
| fa fa-file-code-o | Try it | |
| fa fa-file-excel-o | Try it | |
| fa fa-file-image-o | Try it | |
| fa fa-file-movie-o | Try it | |
| fa fa-file-pdf-o | Try it | |
| fa fa-file-photo-o | Try it | |
| fa fa-file-picture-o | Try it | |
| fa fa-file-powerpoint-o | Try it | |
| fa fa-file-sound-o | Try it | |
| fa fa-file-video-o | Try it | |
| fa fa-file-word-o | Try it | |
| fa fa-file-zip-o | Try it | |
| fa fa-film | Try it | |
| fa fa-filter | Try it | |
| fa fa-fire | Try it | |
| fa fa-fire-extinguisher | Try it | |
| fa fa-flag | Try it | |
| fa fa-flag-checkered | Try it | |
| fa fa-flag-o | Try it | |
| fa fa-flash | Try it | |
| fa fa-flask | Try it | |
| fa fa-folder | Try it | |
| fa fa-folder-o | Try it | |
| fa fa-folder-open | Try it | |
| fa fa-folder-open-o | Try it | |
| fa fa-frown-o | Try it | |
| fa fa-futbol-o | Try it | |
| fa fa-gamepad | Try it | |
| fa fa-gavel | Try it | |
| fa fa-gear | Try it | |
| fa fa-gears | Try it | |
| fa fa-genderless | Try it | |
| fa fa-gift | Try it | |
| fa fa-glass | Try it | |
| fa fa-globe | Try it | |
| fa fa-graduation-cap | Try it | |
| fa fa-group | Try it | |
| fa fa-hard-of-hearing | Try it | |
| fa fa-hdd-o | Try it | |
| fa fa-hashtag | Try it | |
| fa fa-headphones | Try it | |
| fa fa-heart | Try it | |
| fa fa-heart-o | Try it | |
| fa fa-heartbeat | Try it | |
| fa fa-history | Try it | |
| fa fa-home | Try it | |
| fa fa-hotel | Try it | |
| fa fa-hourglass | Try it | |
| fa fa-hourglass-1 | Try it | |
| fa fa-hourglass-2 | Try it | |
| fa fa-hourglass-3 | Try it | |
| fa fa-hourglass-end | Try it | |
| fa fa-hourglass-half | Try it | |
| fa fa-hourglass-o | Try it | |
| fa fa-hourglass-start | Try it | |
| fa fa-i-cursor | Try it | |
| fa fa-image | Try it | |
| fa fa-inbox | Try it | |
| fa fa-industry | Try it | |
| fa fa-info | Try it | |
| fa fa-info-circle | Try it | |
| fa fa-institution | Try it | |
| fa fa-key | Try it | |
| fa fa-keyboard-o | Try it | |
| fa fa-language | Try it | |
| fa fa-laptop | Try it | |
| fa fa-leaf | Try it | |
| fa fa-legal | Try it | |
| fa fa-lemon-o | Try it | |
| fa fa-level-down | Try it | |
| fa fa-level-up | Try it | |
| fa fa-life-bouy | Try it | |
| fa fa-life-buoy | Try it | |
| fa fa-life-ring | Try it | |
| fa fa-life-saver | Try it | |
| fa fa-lightbulb-o | Try it | |
| fa fa-line-chart | Try it | |
| fa fa-location-arrow | Try it | |
| fa fa-lock | Try it | |
| fa fa-low-vision | Try it | |
| fa fa-magic | Try it | |
| fa fa-magnet | Try it | |
| fa fa-mail-forward | Try it | |
| fa fa-mail-reply | Try it | |
| fa fa-mail-reply-all | Try it | |
| fa fa-male | Try it | |
| fa fa-map | Try it | |
| fa fa-map-o | Try it | |
| fa fa-map-pin | Try it | |
| fa fa-map-signs | Try it | |
| fa fa-map-marker | Try it | |
| fa fa-meh-o | Try it | |
| fa fa-microphone | Try it | |
| fa fa-microphone-slash | Try it | |
| fa fa-minus | Try it | |
| fa fa-minus-circle | Try it | |
| fa fa-minus-square | Try it | |
| fa fa-minus-square-o | Try it | |
| fa fa-mobile | Try it | |
| fa fa-mobile-phone | Try it | |
| fa fa-money | Try it | |
| fa fa-moon-o | Try it | |
| fa fa-mortar-board | Try it | |
| fa fa-motorcycle | Try it | |
| fa fa-mouse-pointer | Try it | |
| fa fa-music | Try it | |
| fa fa-navicon | Try it | |
| fa fa-newspaper-o | Try it | |
| fa fa-object-group | Try it | |
| fa fa-object-ungroup | Try it | |
| fa fa-paint-brush | Try it | |
| fa fa-paper-plane | Try it | |
| fa fa-paper-plane-o | Try it | |
| fa fa-paw | Try it | |
| fa fa-pencil | Try it | |
| fa fa-pencil-square | Try it | |
| fa fa-pencil-square-o | Try it | |
| fa fa-percent | Try it | |
| fa fa-phone | Try it | |
| fa fa-phone-square | Try it | |
| fa fa-photo | Try it | |
| fa fa-picture-o | Try it | |
| fa fa-pie-chart | Try it | |
| fa fa-plane | Try it | |
| fa fa-plug | Try it | |
| fa fa-plus | Try it | |
| fa fa-plus-circle | Try it | |
| fa fa-plus-square | Try it | |
| fa fa-plus-square-o | Try it | |
| fa fa-power-off | Try it | |
| fa fa-print | Try it | |
| fa fa-puzzle-piece | Try it | |
| fa fa-qrcode | Try it | |
| fa fa-question | Try it | |
| fa fa-question-circle | Try it | |
| fa fa-question-circle-o | Try it | |
| fa fa-quote-left | Try it | |
| fa fa-quote-right | Try it | |
| fa fa-random | Try it | |
| fa fa-recycle | Try it | |
| fa fa-refresh | Try it | |
| fa fa-registered | Try it | |
| fa fa-remove | Try it | |
| fa fa-reorder | Try it | |
| fa fa-reply | Try it | |
| fa fa-reply-all | Try it | |
| fa fa-retweet | Try it | |
| fa fa-road | Try it | |
| fa fa-rocket | Try it | |
| fa fa-rss | Try it | |
| fa fa-rss-square | Try it | |
| fa fa-search | Try it | |
| fa fa-search-minus | Try it | |
| fa fa-search-plus | Try it | |
| fa fa-send | Try it | |
| fa fa-send-o | Try it | |
| fa fa-server | Try it | |
| fa fa-share | Try it | |
| fa fa-share-alt | Try it | |
| fa fa-share-alt-square | Try it | |
| fa fa-share-square | Try it | |
| fa fa-share-square-o | Try it | |
| fa fa-shield | Try it | |
| fa fa-ship | Try it | |
| fa fa-shopping-bag | Try it | |
| fa fa-shopping-basket | Try it | |
| fa fa-shopping-cart | Try it | |
| fa fa-sign-in | Try it | |
| fa fa-sign-out | Try it | |
| fa fa-sign-language | Try it | |
| fa fa-signal | Try it | |
| fa fa-signing | Try it | |
| fa fa-sitemap | Try it | |
| fa fa-sliders | Try it | |
| fa fa-smile-o | Try it | |
| fa fa-soccer-ball-o | Try it | |
| fa fa-sort | Try it | |
| fa fa-sort-alpha-asc | Try it | |
| fa fa-sort-alpha-desc | Try it | |
| fa fa-sort-amount-asc | Try it | |
| fa fa-sort-amount-desc | Try it | |
| fa fa-sort-asc | Try it | |
| fa fa-sort-desc | Try it | |
| fa fa-sort-down | Try it | |
| fa fa-sort-numeric-asc | Try it | |
| fa fa-sort-numeric-desc | Try it | |
| fa fa-sort-up | Try it | |
| fa fa-space-shuttle | Try it | |
| fa fa-spinner | Try it | |
| fa fa-spoon | Try it | |
| fa fa-square | Try it | |
| fa fa-square-o | Try it | |
| fa fa-star | Try it | |
| fa fa-star-half | Try it | |
| fa fa-star-half-empty | Try it | |
| fa fa-star-half-full | Try it | |
| fa fa-star-half-o | Try it | |
| fa fa-star-o | Try it | |
| fa fa-sticky-note | Try it | |
| fa fa-sticky-note-o | Try it | |
| fa fa-street-view | Try it | |
| fa fa-suitcase | Try it | |
| fa fa-sun-o | Try it | |
| fa fa-support | Try it | |
| fa fa-tablet | Try it | |
| fa fa-tachometer | Try it | |
| fa fa-tag | Try it | |
| fa fa-tags | Try it | |
| fa fa-tasks | Try it | |
| fa fa-taxi | Try it | |
| fa fa-television | Try it | |
| fa fa-terminal | Try it | |
| fa fa-thumb-tack | Try it | |
| fa fa-thumbs-down | Try it | |
| fa fa-thumbs-o-up | Try it | |
| fa fa-thumbs-up | Try it | |
| fa fa-ticket | Try it | |
| fa fa-times | Try it | |
| fa fa-times-circle | Try it | |
| fa fa-times-circle-o | Try it | |
| fa fa-tint | Try it | |
| fa fa-toggle-down | Try it | |
| fa fa-toggle-left | Try it | |
| fa fa-toggle-right | Try it | |
| fa fa-toggle-up | Try it | |
| fa fa-toggle-off | Try it | |
| fa fa-toggle-on | Try it | |
| fa fa-trademark | Try it | |
| fa fa-trash | Try it | |
| fa fa-trash-o | Try it | |
| fa fa-tree | Try it | |
| fa fa-trophy | Try it | |
| fa fa-truck | Try it | |
| fa fa-tty | Try it | |
| fa fa-tv | Try it | |
| fa fa-umbrella | Try it | |
| fa fa-universal-access | Try it | |
| fa fa-university | Try it | |
| fa fa-unlock | Try it | |
| fa fa-unlock-alt | Try it | |
| fa fa-unsorted | Try it | |
| fa fa-upload | Try it | |
| fa fa-user | Try it | |
| fa fa-user-plus | Try it | |
| fa fa-user-secret | Try it | |
| fa fa-user-times | Try it | |
| fa fa-users | Try it | |
| fa fa-video-camera | Try it | |
| fa fa-volume-control-phone | Try it | |
| fa fa-volume-down | Try it | |
| fa fa-volume-off | Try it | |
| fa fa-volume-up | Try it | |
| fa fa-warning | Try it | |
| fa fa-wheelchair | Try it | |
| fa fa-wheelchair-alt | Try it | |
| fa fa-wifi | Try it | |
| fa fa-wrench | Try it |
-> Komentar (relevan) sesuai posting di atas.
-> Dilarang Menyertakan Link/Url