Cara Membuat Halaman Icon Fontawesome di Blog
March 22, 2020
•
2 Comments
Anirocksite.com - Disini saya akan membagikan sebuah cara membuat halaman icon fontawesome dihalaman statis blog.
Bagi kamu yang sudah memiliki web atau blog mungkin sudah tidak asing lagi dengan ICON karna biasanya icon dipasang tepat setelah nama menu navigasi yang ada di web tersebut agar terlihat lebih lengkap. Biasanya pemilik web mengambil icon itu dari berbagai web, untuk Icon dari Fontawesome diambil dari web ini ⇒ https://fontawesome.com/ dan ada juga menggunakan Icon SVG yang paling banyak digunakan para blogger saat ini karna mampu mempercepat loading web karna tanpa perlu memasang script seperti FontAwesome, dan untuk mendapatkan Icon SVG bisa diambil dari ⇒ https://materialdesignicons.com.
Baca juga : Mempercepat Web Dengan Memasang Icon SVG
Dengan memasang halaman icon Fontawesome dihalaman blog kita, dapat mempermudah dalam melakukan pengeditan navigasi untuk menambah icon karna tidak perlu mampir ke web web penyedia icon lainnya, kita cukup masuk kehalaman icon fontawesome milik kita sendiri. Berikut demo dari halaman Icon Fontawesome.
Jika kamu udah melihat contoh halaman fontawesome ditombol demo diatas, maka seperti itulah hasilnya dan itu hanya sebagian Screenshot icon dari dari banyaknya icon. Jika kamu tertarik untuk memasangnya dihalaman blog kamu silahkan ikuti tutor pemasangannya dibawah ini, caranya cukup mudah kok.
Cara Membuat Halaman Icon Fontawesome di Blog
1. Pertama, login terlebih dahulu ke Blogger,
2. Pada dashboard Blogger pilih Page/Halaman ⇒ New Entry ( Tulis Halaman Baru ) ⇒ Terakhir pilih mode penulisan HTML bukan Compose ,
3.Kemudian copy kode 1 paket ini dan pastekan dihalaman tersebut (Ingat dalam mode penulisan HTML),
Source code ini saya ambil langsung dari Arlinadzgn jadi saya bukanlah yang membuat halaman icon Fontawesome ini.
<!-- FONT AWESOME ARLINA DZGN -->
<div id="font-awesome-list">
<ul class="font-group">
<li><i class="fa fa-glass"></i> <span class="icon-name">fa-glass</span> <span class="icon-value">"\f000"</span></li>
<li><i class="fa fa-music"></i> <span class="icon-name">fa-music</span> <span class="icon-value">"\f001"</span></li>
<li><i class="fa fa-search"></i> <span class="icon-name">fa-search</span> <span class="icon-value">"\f002"</span></li>
<li><i class="fa fa-envelope-o"></i> <span class="icon-name">fa-envelope-o</span> <span class="icon-value">"\f003"</span></li>
<li><i class="fa fa-heart"></i> <span class="icon-name">fa-heart</span> <span class="icon-value">"\f004"</span></li>
<li><i class="fa fa-star"></i> <span class="icon-name">fa-star</span> <span class="icon-value">"\f005"</span></li>
<li><i class="fa fa-star-o"></i> <span class="icon-name">fa-star-o</span> <span class="icon-value">"\f006"</span></li>
<li><i class="fa fa-user"></i> <span class="icon-name">fa-user</span> <span class="icon-value">"\f007"</span></li>
<li><i class="fa fa-film"></i> <span class="icon-name">fa-film</span> <span class="icon-value">"\f008"</span></li>
<li><i class="fa fa-th-large"></i> <span class="icon-name">fa-th-large</span> <span class="icon-value">"\f009"</span></li>
<li><i class="fa fa-th"></i> <span class="icon-name">fa-th</span> <span class="icon-value">"\f00a"</span></li>
<li><i class="fa fa-th-list"></i> <span class="icon-name">fa-th-list</span> <span class="icon-value">"\f00b"</span></li>
<li><i class="fa fa-check"></i> <span class="icon-name">fa-check</span> <span class="icon-value">"\f00c"</span></li>
<li><i class="fa fa-times"></i> <span class="icon-name">fa-times</span> <span class="icon-value">"\f00d"</span></li>
<li><i class="fa fa-search-plus"></i> <span class="icon-name">fa-search-plus</span> <span class="icon-value">"\f00e"</span></li>
<li><i class="fa fa-search-minus"></i> <span class="icon-name">fa-search-minus</span> <span class="icon-value">"\f010"</span></li>
<li><i class="fa fa-power-off"></i> <span class="icon-name">fa-power-off</span> <span class="icon-value">"\f011"</span></li>
<li><i class="fa fa-signal"></i> <span class="icon-name">fa-signal</span> <span class="icon-value">"\f012"</span></li>
<li><i class="fa fa-cog"></i> <span class="icon-name">fa-cog</span> <span class="icon-value">"\f013"</span></li>
<li><i class="fa fa-trash-o"></i> <span class="icon-name">fa-trash-o</span> <span class="icon-value">"\f014"</span></li>
<li><i class="fa fa-home"></i> <span class="icon-name">fa-home</span> <span class="icon-value">"\f015"</span></li>
<li><i class="fa fa-file-o"></i> <span class="icon-name">fa-file-o</span> <span class="icon-value">"\f016"</span></li>
<li><i class="fa fa-clock-o"></i> <span class="icon-name">fa-clock-o</span> <span class="icon-value">"\f017"</span></li>
<li><i class="fa fa-road"></i> <span class="icon-name">fa-road</span> <span class="icon-value">"\f018"</span></li>
<li><i class="fa fa-download"></i> <span class="icon-name">fa-download</span> <span class="icon-value">"\f019"</span></li>
<li><i class="fa fa-arrow-circle-o-down"></i> <span class="icon-name">fa-arrow-circle-o-down</span> <span class="icon-value">"\f01a"</span></li>
<li><i class="fa fa-arrow-circle-o-up"></i> <span class="icon-name">fa-arrow-circle-o-up</span> <span class="icon-value">"\f01b"</span></li>
<li><i class="fa fa-inbox"></i> <span class="icon-name">fa-inbox</span> <span class="icon-value">"\f01c"</span></li>
<li><i class="fa fa-play-circle-o"></i> <span class="icon-name">fa-play-circle-o</span> <span class="icon-value">"\f01d"</span></li>
<li><i class="fa fa-repeat"></i> <span class="icon-name">fa-repeat</span> <span class="icon-value">"\f01e"</span></li>
<li><i class="fa fa-refresh"></i> <span class="icon-name">fa-refresh</span> <span class="icon-value">"\f021"</span></li>
<li><i class="fa fa-list-alt"></i> <span class="icon-name">fa-list-alt</span> <span class="icon-value">"\f022"</span></li>
<li><i class="fa fa-lock"></i> <span class="icon-name">fa-lock</span> <span class="icon-value">"\f023"</span></li>
<li><i class="fa fa-flag"></i> <span class="icon-name">fa-flag</span> <span class="icon-value">"\f024"</span></li>
<li><i class="fa fa-headphones"></i> <span class="icon-name">fa-headphones</span> <span class="icon-value">"\f025"</span></li>
<li><i class="fa fa-volume-off"></i> <span class="icon-name">fa-volume-off</span> <span class="icon-value">"\f026"</span></li>
<li><i class="fa fa-volume-down"></i> <span class="icon-name">fa-volume-down</span> <span class="icon-value">"\f027"</span></li>
<li><i class="fa fa-volume-up"></i> <span class="icon-name">fa-volume-up</span> <span class="icon-value">"\f028"</span></li>
<li><i class="fa fa-qrcode"></i> <span class="icon-name">fa-qrcode</span> <span class="icon-value">"\f029"</span></li>
<li><i class="fa fa-barcode"></i> <span class="icon-name">fa-barcode</span> <span class="icon-value">"\f02a"</span></li>
<li><i class="fa fa-tag"></i> <span class="icon-name">fa-tag</span> <span class="icon-value">"\f02b"</span></li>
<li><i class="fa fa-tags"></i> <span class="icon-name">fa-tags</span> <span class="icon-value">"\f02c"</span></li>
<li><i class="fa fa-book"></i> <span class="icon-name">fa-book</span> <span class="icon-value">"\f02d"</span></li>
<li><i class="fa fa-bookmark"></i> <span class="icon-name">fa-bookmark</span> <span class="icon-value">"\f02e"</span></li>
<li><i class="fa fa-print"></i> <span class="icon-name">fa-print</span> <span class="icon-value">"\f02f"</span></li>
<li><i class="fa fa-camera"></i> <span class="icon-name">fa-camera</span> <span class="icon-value">"\f030"</span></li>
<li><i class="fa fa-font"></i> <span class="icon-name">fa-font</span> <span class="icon-value">"\f031"</span></li>
<li><i class="fa fa-bold"></i> <span class="icon-name">fa-bold</span> <span class="icon-value">"\f032"</span></li>
<li><i class="fa fa-italic"></i> <span class="icon-name">fa-italic</span> <span class="icon-value">"\f033"</span></li>
<li><i class="fa fa-text-height"></i> <span class="icon-name">fa-text-height</span> <span class="icon-value">"\f034"</span></li>
<li><i class="fa fa-text-width"></i> <span class="icon-name">fa-text-width</span> <span class="icon-value">"\f035"</span></li>
<li><i class="fa fa-align-left"></i> <span class="icon-name">fa-align-left</span> <span class="icon-value">"\f036"</span></li>
<li><i class="fa fa-align-center"></i> <span class="icon-name">fa-align-center</span> <span class="icon-value">"\f037"</span></li>
<li><i class="fa fa-align-right"></i> <span class="icon-name">fa-align-right</span> <span class="icon-value">"\f038"</span></li>
<li><i class="fa fa-align-justify"></i> <span class="icon-name">fa-align-justify</span> <span class="icon-value">"\f039"</span></li>
<li><i class="fa fa-list"></i> <span class="icon-name">fa-list</span> <span class="icon-value">"\f03a"</span></li>
<li><i class="fa fa-outdent"></i> <span class="icon-name">fa-outdent</span> <span class="icon-value">"\f03b"</span></li>
<li><i class="fa fa-indent"></i> <span class="icon-name">fa-indent</span> <span class="icon-value">"\f03c"</span></li>
<li><i class="fa fa-video-camera"></i> <span class="icon-name">fa-video-camera</span> <span class="icon-value">"\f03d"</span></li>
<li><i class="fa fa-picture-o"></i> <span class="icon-name">fa-picture-o</span> <span class="icon-value">"\f03e"</span></li>
<li><i class="fa fa-pencil"></i> <span class="icon-name">fa-pencil</span> <span class="icon-value">"\f040"</span></li>
<li><i class="fa fa-map-marker"></i> <span class="icon-name">fa-map-marker</span> <span class="icon-value">"\f041"</span></li>
<li><i class="fa fa-adjust"></i> <span class="icon-name">fa-adjust</span> <span class="icon-value">"\f042"</span></li>
<li><i class="fa fa-tint"></i> <span class="icon-name">fa-tint</span> <span class="icon-value">"\f043"</span></li>
<li><i class="fa fa-pencil-square-o"></i> <span class="icon-name">fa-pencil-square-o</span> <span class="icon-value">"\f044"</span></li>
<li><i class="fa fa-share-square-o"></i> <span class="icon-name">fa-share-square-o</span> <span class="icon-value">"\f045"</span></li>
<li><i class="fa fa-check-square-o"></i> <span class="icon-name">fa-check-square-o</span> <span class="icon-value">"\f046"</span></li>
<li><i class="fa fa-arrows"></i> <span class="icon-name">fa-arrows</span> <span class="icon-value">"\f047"</span></li>
<li><i class="fa fa-step-backward"></i> <span class="icon-name">fa-step-backward</span> <span class="icon-value">"\f048"</span></li>
<li><i class="fa fa-fast-backward"></i> <span class="icon-name">fa-fast-backward</span> <span class="icon-value">"\f049"</span></li>
<li><i class="fa fa-backward"></i> <span class="icon-name">fa-backward</span> <span class="icon-value">"\f04a"</span></li>
<li><i class="fa fa-play"></i> <span class="icon-name">fa-play</span> <span class="icon-value">"\f04b"</span></li>
<li><i class="fa fa-pause"></i> <span class="icon-name">fa-pause</span> <span class="icon-value">"\f04c"</span></li>
<li><i class="fa fa-stop"></i> <span class="icon-name">fa-stop</span> <span class="icon-value">"\f04d"</span></li>
<li><i class="fa fa-forward"></i> <span class="icon-name">fa-forward</span> <span class="icon-value">"\f04e"</span></li>
<li><i class="fa fa-fast-forward"></i> <span class="icon-name">fa-fast-forward</span> <span class="icon-value">"\f050"</span></li>
<li><i class="fa fa-step-forward"></i> <span class="icon-name">fa-step-forward</span> <span class="icon-value">"\f051"</span></li>
<li><i class="fa fa-eject"></i> <span class="icon-name">fa-eject</span> <span class="icon-value">"\f052"</span></li>
<li><i class="fa fa-chevron-left"></i> <span class="icon-name">fa-chevron-left</span> <span class="icon-value">"\f053"</span></li>
<li><i class="fa fa-chevron-right"></i> <span class="icon-name">fa-chevron-right</span> <span class="icon-value">"\f054"</span></li>
<li><i class="fa fa-plus-circle"></i> <span class="icon-name">fa-plus-circle</span> <span class="icon-value">"\f055"</span></li>
<li><i class="fa fa-minus-circle"></i> <span class="icon-name">fa-minus-circle</span> <span class="icon-value">"\f056"</span></li>
<li><i class="fa fa-times-circle"></i> <span class="icon-name">fa-times-circle</span> <span class="icon-value">"\f057"</span></li>
<li><i class="fa fa-check-circle"></i> <span class="icon-name">fa-check-circle</span> <span class="icon-value">"\f058"</span></li>
<li><i class="fa fa-question-circle"></i> <span class="icon-name">fa-question-circle</span> <span class="icon-value">"\f059"</span></li>
<li><i class="fa fa-info-circle"></i> <span class="icon-name">fa-info-circle</span> <span class="icon-value">"\f05a"</span></li>
<li><i class="fa fa-crosshairs"></i> <span class="icon-name">fa-crosshairs</span> <span class="icon-value">"\f05b"</span></li>
<li><i class="fa fa-times-circle-o"></i> <span class="icon-name">fa-times-circle-o</span> <span class="icon-value">"\f05c"</span></li>
<li><i class="fa fa-check-circle-o"></i> <span class="icon-name">fa-check-circle-o</span> <span class="icon-value">"\f05d"</span></li>
<li><i class="fa fa-ban"></i> <span class="icon-name">fa-ban</span> <span class="icon-value">"\f05e"</span></li>
<li><i class="fa fa-arrow-left"></i> <span class="icon-name">fa-arrow-left</span> <span class="icon-value">"\f060"</span></li>
<li><i class="fa fa-arrow-right"></i> <span class="icon-name">fa-arrow-right</span> <span class="icon-value">"\f061"</span></li>
<li><i class="fa fa-arrow-up"></i> <span class="icon-name">fa-arrow-up</span> <span class="icon-value">"\f062"</span></li>
<li><i class="fa fa-arrow-down"></i> <span class="icon-name">fa-arrow-down</span> <span class="icon-value">"\f063"</span></li>
<li><i class="fa fa-share"></i> <span class="icon-name">fa-share</span> <span class="icon-value">"\f064"</span></li>
<li><i class="fa fa-expand"></i> <span class="icon-name">fa-expand</span> <span class="icon-value">"\f065"</span></li>
<li><i class="fa fa-compress"></i> <span class="icon-name">fa-compress</span> <span class="icon-value">"\f066"</span></li>
<li><i class="fa fa-plus"></i> <span class="icon-name">fa-plus</span> <span class="icon-value">"\f067"</span></li>
<li><i class="fa fa-minus"></i> <span class="icon-name">fa-minus</span> <span class="icon-value">"\f068"</span></li>
<li><i class="fa fa-asterisk"></i> <span class="icon-name">fa-asterisk</span> <span class="icon-value">"\f069"</span></li>
<li><i class="fa fa-exclamation-circle"></i> <span class="icon-name">fa-exclamation-circle</span> <span class="icon-value">"\f06a"</span></li>
<li><i class="fa fa-gift"></i> <span class="icon-name">fa-gift</span> <span class="icon-value">"\f06b"</span></li>
<li><i class="fa fa-leaf"></i> <span class="icon-name">fa-leaf</span> <span class="icon-value">"\f06c"</span></li>
<li><i class="fa fa-fire"></i> <span class="icon-name">fa-fire</span> <span class="icon-value">"\f06d"</span></li>
<li><i class="fa fa-eye"></i> <span class="icon-name">fa-eye</span> <span class="icon-value">"\f06e"</span></li>
<li><i class="fa fa-eye-slash"></i> <span class="icon-name">fa-eye-slash</span> <span class="icon-value">"\f070"</span></li>
<li><i class="fa fa-exclamation-triangle"></i> <span class="icon-name">fa-exclamation-triangle</span> <span class="icon-value">"\f071"</span></li>
<li><i class="fa fa-plane"></i> <span class="icon-name">fa-plane</span> <span class="icon-value">"\f072"</span></li>
<li><i class="fa fa-calendar"></i> <span class="icon-name">fa-calendar</span> <span class="icon-value">"\f073"</span></li>
<li><i class="fa fa-random"></i> <span class="icon-name">fa-random</span> <span class="icon-value">"\f074"</span></li>
<li><i class="fa fa-comment"></i> <span class="icon-name">fa-comment</span> <span class="icon-value">"\f075"</span></li>
<li><i class="fa fa-magnet"></i> <span class="icon-name">fa-magnet</span> <span class="icon-value">"\f076"</span></li>
<li><i class="fa fa-chevron-up"></i> <span class="icon-name">fa-chevron-up</span> <span class="icon-value">"\f077"</span></li>
<li><i class="fa fa-chevron-down"></i> <span class="icon-name">fa-chevron-down</span> <span class="icon-value">"\f078"</span></li>
<li><i class="fa fa-retweet"></i> <span class="icon-name">fa-retweet</span> <span class="icon-value">"\f079"</span></li>
<li><i class="fa fa-shopping-cart"></i> <span class="icon-name">fa-shopping-cart</span> <span class="icon-value">"\f07a"</span></li>
<li><i class="fa fa-folder"></i> <span class="icon-name">fa-folder</span> <span class="icon-value">"\f07b"</span></li>
<li><i class="fa fa-folder-open"></i> <span class="icon-name">fa-folder-open</span> <span class="icon-value">"\f07c"</span></li>
<li><i class="fa fa-arrows-v"></i> <span class="icon-name">fa-arrows-v</span> <span class="icon-value">"\f07d"</span></li>
<li><i class="fa fa-arrows-h"></i> <span class="icon-name">fa-arrows-h</span> <span class="icon-value">"\f07e"</span></li>
<li><i class="fa fa-bar-chart"></i> <span class="icon-name">fa-bar-chart</span> <span class="icon-value">"\f080"</span></li>
<li><i class="fa fa-twitter-square"></i> <span class="icon-name">fa-twitter-square</span> <span class="icon-value">"\f081"</span></li>
<li><i class="fa fa-facebook-square"></i> <span class="icon-name">fa-facebook-square</span> <span class="icon-value">"\f082"</span></li>
<li><i class="fa fa-camera-retro"></i> <span class="icon-name">fa-camera-retro</span> <span class="icon-value">"\f083"</span></li>
<li><i class="fa fa-key"></i> <span class="icon-name">fa-key</span> <span class="icon-value">"\f084"</span></li>
<li><i class="fa fa-cogs"></i> <span class="icon-name">fa-cogs</span> <span class="icon-value">"\f085"</span></li>
<li><i class="fa fa-comments"></i> <span class="icon-name">fa-comments</span> <span class="icon-value">"\f086"</span></li>
<li><i class="fa fa-thumbs-o-up"></i> <span class="icon-name">fa-thumbs-o-up</span> <span class="icon-value">"\f087"</span></li>
<li><i class="fa fa-thumbs-o-down"></i> <span class="icon-name">fa-thumbs-o-down</span> <span class="icon-value">"\f088"</span></li>
<li><i class="fa fa-star-half"></i> <span class="icon-name">fa-star-half</span> <span class="icon-value">"\f089"</span></li>
<li><i class="fa fa-heart-o"></i> <span class="icon-name">fa-heart-o</span> <span class="icon-value">"\f08a"</span></li>
<li><i class="fa fa-sign-out"></i> <span class="icon-name">fa-sign-out</span> <span class="icon-value">"\f08b"</span></li>
<li><i class="fa fa-linkedin-square"></i> <span class="icon-name">fa-linkedin-square</span> <span class="icon-value">"\f08c"</span></li>
<li><i class="fa fa-thumb-tack"></i> <span class="icon-name">fa-thumb-tack</span> <span class="icon-value">"\f08d"</span></li>
<li><i class="fa fa-external-link"></i> <span class="icon-name">fa-external-link</span> <span class="icon-value">"\f08e"</span></li>
<li><i class="fa fa-sign-in"></i> <span class="icon-name">fa-sign-in</span> <span class="icon-value">"\f090"</span></li>
<li><i class="fa fa-trophy"></i> <span class="icon-name">fa-trophy</span> <span class="icon-value">"\f091"</span></li>
<li><i class="fa fa-github-square"></i> <span class="icon-name">fa-github-square</span> <span class="icon-value">"\f092"</span></li>
<li><i class="fa fa-upload"></i> <span class="icon-name">fa-upload</span> <span class="icon-value">"\f093"</span></li>
<li><i class="fa fa-lemon-o"></i> <span class="icon-name">fa-lemon-o</span> <span class="icon-value">"\f094"</span></li>
<li><i class="fa fa-phone"></i> <span class="icon-name">fa-phone</span> <span class="icon-value">"\f095"</span></li>
<li><i class="fa fa-square-o"></i> <span class="icon-name">fa-square-o</span> <span class="icon-value">"\f096"</span></li>
<li><i class="fa fa-bookmark-o"></i> <span class="icon-name">fa-bookmark-o</span> <span class="icon-value">"\f097"</span></li>
<li><i class="fa fa-phone-square"></i> <span class="icon-name">fa-phone-square</span> <span class="icon-value">"\f098"</span></li>
<li><i class="fa fa-twitter"></i> <span class="icon-name">fa-twitter</span> <span class="icon-value">"\f099"</span></li>
<li><i class="fa fa-facebook"></i> <span class="icon-name">fa-facebook</span> <span class="icon-value">"\f09a"</span></li>
<li><i class="fa fa-github"></i> <span class="icon-name">fa-github</span> <span class="icon-value">"\f09b"</span></li>
<li><i class="fa fa-unlock"></i> <span class="icon-name">fa-unlock</span> <span class="icon-value">"\f09c"</span></li>
<li><i class="fa fa-credit-card"></i> <span class="icon-name">fa-credit-card</span> <span class="icon-value">"\f09d"</span></li>
<li><i class="fa fa-rss"></i> <span class="icon-name">fa-rss</span> <span class="icon-value">"\f09e"</span></li>
<li><i class="fa fa-hdd-o"></i> <span class="icon-name">fa-hdd-o</span> <span class="icon-value">"\f0a0"</span></li>
<li><i class="fa fa-bullhorn"></i> <span class="icon-name">fa-bullhorn</span> <span class="icon-value">"\f0a1"</span></li>
<li><i class="fa fa-bell"></i> <span class="icon-name">fa-bell</span> <span class="icon-value">"\f0f3"</span></li>
<li><i class="fa fa-certificate"></i> <span class="icon-name">fa-certificate</span> <span class="icon-value">"\f0a3"</span></li>
<li><i class="fa fa-hand-o-right"></i> <span class="icon-name">fa-hand-o-right</span> <span class="icon-value">"\f0a4"</span></li>
<li><i class="fa fa-hand-o-left"></i> <span class="icon-name">fa-hand-o-left</span> <span class="icon-value">"\f0a5"</span></li>
<li><i class="fa fa-hand-o-up"></i> <span class="icon-name">fa-hand-o-up</span> <span class="icon-value">"\f0a6"</span></li>
<li><i class="fa fa-hand-o-down"></i> <span class="icon-name">fa-hand-o-down</span> <span class="icon-value">"\f0a7"</span></li>
<li><i class="fa fa-arrow-circle-left"></i> <span class="icon-name">fa-arrow-circle-left</span> <span class="icon-value">"\f0a8"</span></li>
<li><i class="fa fa-arrow-circle-right"></i> <span class="icon-name">fa-arrow-circle-right</span> <span class="icon-value">"\f0a9"</span></li>
<li><i class="fa fa-arrow-circle-up"></i> <span class="icon-name">fa-arrow-circle-up</span> <span class="icon-value">"\f0aa"</span></li>
<li><i class="fa fa-arrow-circle-down"></i> <span class="icon-name">fa-arrow-circle-down</span> <span class="icon-value">"\f0ab"</span></li>
<li><i class="fa fa-globe"></i> <span class="icon-name">fa-globe</span> <span class="icon-value">"\f0ac"</span></li>
<li><i class="fa fa-wrench"></i> <span class="icon-name">fa-wrench</span> <span class="icon-value">"\f0ad"</span></li>
<li><i class="fa fa-tasks"></i> <span class="icon-name">fa-tasks</span> <span class="icon-value">"\f0ae"</span></li>
<li><i class="fa fa-filter"></i> <span class="icon-name">fa-filter</span> <span class="icon-value">"\f0b0"</span></li>
<li><i class="fa fa-briefcase"></i> <span class="icon-name">fa-briefcase</span> <span class="icon-value">"\f0b1"</span></li>
<li><i class="fa fa-arrows-alt"></i> <span class="icon-name">fa-arrows-alt</span> <span class="icon-value">"\f0b2"</span></li>
<li><i class="fa fa-users"></i> <span class="icon-name">fa-users</span> <span class="icon-value">"\f0c0"</span></li>
<li><i class="fa fa-link"></i> <span class="icon-name">fa-link</span> <span class="icon-value">"\f0c1"</span></li>
<li><i class="fa fa-cloud"></i> <span class="icon-name">fa-cloud</span> <span class="icon-value">"\f0c2"</span></li>
<li><i class="fa fa-flask"></i> <span class="icon-name">fa-flask</span> <span class="icon-value">"\f0c3"</span></li>
<li><i class="fa fa-scissors"></i> <span class="icon-name">fa-scissors</span> <span class="icon-value">"\f0c4"</span></li>
<li><i class="fa fa-files-o"></i> <span class="icon-name">fa-files-o</span> <span class="icon-value">"\f0c5"</span></li>
<li><i class="fa fa-paperclip"></i> <span class="icon-name">fa-paperclip</span> <span class="icon-value">"\f0c6"</span></li>
<li><i class="fa fa-floppy-o"></i> <span class="icon-name">fa-floppy-o</span> <span class="icon-value">"\f0c7"</span></li>
<li><i class="fa fa-square"></i> <span class="icon-name">fa-square</span> <span class="icon-value">"\f0c8"</span></li>
<li><i class="fa fa-bars"></i> <span class="icon-name">fa-bars</span> <span class="icon-value">"\f0c9"</span></li>
<li><i class="fa fa-list-ul"></i> <span class="icon-name">fa-list-ul</span> <span class="icon-value">"\f0ca"</span></li>
<li><i class="fa fa-list-ol"></i> <span class="icon-name">fa-list-ol</span> <span class="icon-value">"\f0cb"</span></li>
<li><i class="fa fa-strikethrough"></i> <span class="icon-name">fa-strikethrough</span> <span class="icon-value">"\f0cc"</span></li>
<li><i class="fa fa-underline"></i> <span class="icon-name">fa-underline</span> <span class="icon-value">"\f0cd"</span></li>
<li><i class="fa fa-table"></i> <span class="icon-name">fa-table</span> <span class="icon-value">"\f0ce"</span></li>
<li><i class="fa fa-magic"></i> <span class="icon-name">fa-magic</span> <span class="icon-value">"\f0d0"</span></li>
<li><i class="fa fa-truck"></i> <span class="icon-name">fa-truck</span> <span class="icon-value">"\f0d1"</span></li>
<li><i class="fa fa-pinterest"></i> <span class="icon-name">fa-pinterest</span> <span class="icon-value">"\f0d2"</span></li>
<li><i class="fa fa-pinterest-square"></i> <span class="icon-name">fa-pinterest-square</span> <span class="icon-value">"\f0d3"</span></li>
<li><i class="fa fa-google-plus-square"></i> <span class="icon-name">fa-google-plus-square</span> <span class="icon-value">"\f0d4"</span></li>
<li><i class="fa fa-google-plus"></i> <span class="icon-name">fa-google-plus</span> <span class="icon-value">"\f0d5"</span></li>
<li><i class="fa fa-money"></i> <span class="icon-name">fa-money</span> <span class="icon-value">"\f0d6"</span></li>
<li><i class="fa fa-caret-down"></i> <span class="icon-name">fa-caret-down</span> <span class="icon-value">"\f0d7"</span></li>
<li><i class="fa fa-caret-up"></i> <span class="icon-name">fa-caret-up</span> <span class="icon-value">"\f0d8"</span></li>
<li><i class="fa fa-caret-left"></i> <span class="icon-name">fa-caret-left</span> <span class="icon-value">"\f0d9"</span></li>
<li><i class="fa fa-caret-right"></i> <span class="icon-name">fa-caret-right</span> <span class="icon-value">"\f0da"</span></li>
<li><i class="fa fa-columns"></i> <span class="icon-name">fa-columns</span> <span class="icon-value">"\f0db"</span></li>
<li><i class="fa fa-sort"></i> <span class="icon-name">fa-sort</span> <span class="icon-value">"\f0dc"</span></li>
<li><i class="fa fa-sort-desc"></i> <span class="icon-name">fa-sort-desc</span> <span class="icon-value">"\f0dd"</span></li>
<li><i class="fa fa-sort-asc"></i> <span class="icon-name">fa-sort-asc</span> <span class="icon-value">"\f0de"</span></li>
<li><i class="fa fa-envelope"></i> <span class="icon-name">fa-envelope</span> <span class="icon-value">"\f0e0"</span></li>
<li><i class="fa fa-linkedin"></i> <span class="icon-name">fa-linkedin</span> <span class="icon-value">"\f0e1"</span></li>
<li><i class="fa fa-undo"></i> <span class="icon-name">fa-undo</span> <span class="icon-value">"\f0e2"</span></li>
<li><i class="fa fa-gavel"></i> <span class="icon-name">fa-gavel</span> <span class="icon-value">"\f0e3"</span></li>
<li><i class="fa fa-tachometer"></i> <span class="icon-name">fa-tachometer</span> <span class="icon-value">"\f0e4"</span></li>
<li><i class="fa fa-comment-o"></i> <span class="icon-name">fa-comment-o</span> <span class="icon-value">"\f0e5"</span></li>
<li><i class="fa fa-comments-o"></i> <span class="icon-name">fa-comments-o</span> <span class="icon-value">"\f0e6"</span></li>
<li><i class="fa fa-bolt"></i> <span class="icon-name">fa-bolt</span> <span class="icon-value">"\f0e7"</span></li>
<li><i class="fa fa-sitemap"></i> <span class="icon-name">fa-sitemap</span> <span class="icon-value">"\f0e8"</span></li>
<li><i class="fa fa-umbrella"></i> <span class="icon-name">fa-umbrella</span> <span class="icon-value">"\f0e9"</span></li>
<li><i class="fa fa-clipboard"></i> <span class="icon-name">fa-clipboard</span> <span class="icon-value">"\f0ea"</span></li>
<li><i class="fa fa-lightbulb-o"></i> <span class="icon-name">fa-lightbulb-o</span> <span class="icon-value">"\f0eb"</span></li>
<li><i class="fa fa-exchange"></i> <span class="icon-name">fa-exchange</span> <span class="icon-value">"\f0ec"</span></li>
<li><i class="fa fa-cloud-download"></i> <span class="icon-name">fa-cloud-download</span> <span class="icon-value">"\f0ed"</span></li>
<li><i class="fa fa-cloud-upload"></i> <span class="icon-name">fa-cloud-upload</span> <span class="icon-value">"\f0ee"</span></li>
<li><i class="fa fa-user-md"></i> <span class="icon-name">fa-user-md</span> <span class="icon-value">"\f0f0"</span></li>
<li><i class="fa fa-stethoscope"></i> <span class="icon-name">fa-stethoscope</span> <span class="icon-value">"\f0f1"</span></li>
<li><i class="fa fa-suitcase"></i> <span class="icon-name">fa-suitcase</span> <span class="icon-value">"\f0f2"</span></li>
<li><i class="fa fa-bell-o"></i> <span class="icon-name">fa-bell-o</span> <span class="icon-value">"\f0a2"</span></li>
<li><i class="fa fa-coffee"></i> <span class="icon-name">fa-coffee</span> <span class="icon-value">"\f0f4"</span></li>
<li><i class="fa fa-cutlery"></i> <span class="icon-name">fa-cutlery</span> <span class="icon-value">"\f0f5"</span></li>
<li><i class="fa fa-file-text-o"></i> <span class="icon-name">fa-file-text-o</span> <span class="icon-value">"\f0f6"</span></li>
<li><i class="fa fa-building-o"></i> <span class="icon-name">fa-building-o</span> <span class="icon-value">"\f0f7"</span></li>
<li><i class="fa fa-hospital-o"></i> <span class="icon-name">fa-hospital-o</span> <span class="icon-value">"\f0f8"</span></li>
<li><i class="fa fa-ambulance"></i> <span class="icon-name">fa-ambulance</span> <span class="icon-value">"\f0f9"</span></li>
<li><i class="fa fa-medkit"></i> <span class="icon-name">fa-medkit</span> <span class="icon-value">"\f0fa"</span></li>
<li><i class="fa fa-fighter-jet"></i> <span class="icon-name">fa-fighter-jet</span> <span class="icon-value">"\f0fb"</span></li>
<li><i class="fa fa-beer"></i> <span class="icon-name">fa-beer</span> <span class="icon-value">"\f0fc"</span></li>
<li><i class="fa fa-h-square"></i> <span class="icon-name">fa-h-square</span> <span class="icon-value">"\f0fd"</span></li>
<li><i class="fa fa-plus-square"></i> <span class="icon-name">fa-plus-square</span> <span class="icon-value">"\f0fe"</span></li>
<li><i class="fa fa-angle-double-left"></i> <span class="icon-name">fa-angle-double-left</span> <span class="icon-value">"\f100"</span></li>
<li><i class="fa fa-angle-double-right"></i> <span class="icon-name">fa-angle-double-right</span> <span class="icon-value">"\f101"</span></li>
<li><i class="fa fa-angle-double-up"></i> <span class="icon-name">fa-angle-double-up</span> <span class="icon-value">"\f102"</span></li>
<li><i class="fa fa-angle-double-down"></i> <span class="icon-name">fa-angle-double-down</span> <span class="icon-value">"\f103"</span></li>
<li><i class="fa fa-angle-left"></i> <span class="icon-name">fa-angle-left</span> <span class="icon-value">"\f104"</span></li>
<li><i class="fa fa-angle-right"></i> <span class="icon-name">fa-angle-right</span> <span class="icon-value">"\f105"</span></li>
<li><i class="fa fa-angle-up"></i> <span class="icon-name">fa-angle-up</span> <span class="icon-value">"\f106"</span></li>
<li><i class="fa fa-angle-down"></i> <span class="icon-name">fa-angle-down</span> <span class="icon-value">"\f107"</span></li>
<li><i class="fa fa-desktop"></i> <span class="icon-name">fa-desktop</span> <span class="icon-value">"\f108"</span></li>
<li><i class="fa fa-laptop"></i> <span class="icon-name">fa-laptop</span> <span class="icon-value">"\f109"</span></li>
<li><i class="fa fa-tablet"></i> <span class="icon-name">fa-tablet</span> <span class="icon-value">"\f10a"</span></li>
<li><i class="fa fa-mobile"></i> <span class="icon-name">fa-mobile</span> <span class="icon-value">"\f10b"</span></li>
<li><i class="fa fa-circle-o"></i> <span class="icon-name">fa-circle-o</span> <span class="icon-value">"\f10c"</span></li>
<li><i class="fa fa-quote-left"></i> <span class="icon-name">fa-quote-left</span> <span class="icon-value">"\f10d"</span></li>
<li><i class="fa fa-quote-right"></i> <span class="icon-name">fa-quote-right</span> <span class="icon-value">"\f10e"</span></li>
<li><i class="fa fa-spinner"></i> <span class="icon-name">fa-spinner</span> <span class="icon-value">"\f110"</span></li>
<li><i class="fa fa-circle"></i> <span class="icon-name">fa-circle</span> <span class="icon-value">"\f111"</span></li>
<li><i class="fa fa-reply"></i> <span class="icon-name">fa-reply</span> <span class="icon-value">"\f112"</span></li>
<li><i class="fa fa-github-alt"></i> <span class="icon-name">fa-github-alt</span> <span class="icon-value">"\f113"</span></li>
<li><i class="fa fa-folder-o"></i> <span class="icon-name">fa-folder-o</span> <span class="icon-value">"\f114"</span></li>
<li><i class="fa fa-folder-open-o"></i> <span class="icon-name">fa-folder-open-o</span> <span class="icon-value">"\f115"</span></li>
<li><i class="fa fa-smile-o"></i> <span class="icon-name">fa-smile-o</span> <span class="icon-value">"\f118"</span></li>
<li><i class="fa fa-frown-o"></i> <span class="icon-name">fa-frown-o</span> <span class="icon-value">"\f119"</span></li>
<li><i class="fa fa-meh-o"></i> <span class="icon-name">fa-meh-o</span> <span class="icon-value">"\f11a"</span></li>
<li><i class="fa fa-gamepad"></i> <span class="icon-name">fa-gamepad</span> <span class="icon-value">"\f11b"</span></li>
<li><i class="fa fa-keyboard-o"></i> <span class="icon-name">fa-keyboard-o</span> <span class="icon-value">"\f11c"</span></li>
<li><i class="fa fa-flag-o"></i> <span class="icon-name">fa-flag-o</span> <span class="icon-value">"\f11d"</span></li>
<li><i class="fa fa-flag-checkered"></i> <span class="icon-name">fa-flag-checkered</span> <span class="icon-value">"\f11e"</span></li>
<li><i class="fa fa-terminal"></i> <span class="icon-name">fa-terminal</span> <span class="icon-value">"\f120"</span></li>
<li><i class="fa fa-code"></i> <span class="icon-name">fa-code</span> <span class="icon-value">"\f121"</span></li>
<li><i class="fa fa-reply-all"></i> <span class="icon-name">fa-reply-all</span> <span class="icon-value">"\f122"</span></li>
<li><i class="fa fa-star-half-o"></i> <span class="icon-name">fa-star-half-o</span> <span class="icon-value">"\f123"</span></li>
<li><i class="fa fa-location-arrow"></i> <span class="icon-name">fa-location-arrow</span> <span class="icon-value">"\f124"</span></li>
<li><i class="fa fa-crop"></i> <span class="icon-name">fa-crop</span> <span class="icon-value">"\f125"</span></li>
<li><i class="fa fa-code-fork"></i> <span class="icon-name">fa-code-fork</span> <span class="icon-value">"\f126"</span></li>
<li><i class="fa fa-chain-broken"></i> <span class="icon-name">fa-chain-broken</span> <span class="icon-value">"\f127"</span></li>
<li><i class="fa fa-question"></i> <span class="icon-name">fa-question</span> <span class="icon-value">"\f128"</span></li>
<li><i class="fa fa-info"></i> <span class="icon-name">fa-info</span> <span class="icon-value">"\f129"</span></li>
<li><i class="fa fa-exclamation"></i> <span class="icon-name">fa-exclamation</span> <span class="icon-value">"\f12a"</span></li>
<li><i class="fa fa-superscript"></i> <span class="icon-name">fa-superscript</span> <span class="icon-value">"\f12b"</span></li>
<li><i class="fa fa-subscript"></i> <span class="icon-name">fa-subscript</span> <span class="icon-value">"\f12c"</span></li>
<li><i class="fa fa-eraser"></i> <span class="icon-name">fa-eraser</span> <span class="icon-value">"\f12d"</span></li>
<li><i class="fa fa-puzzle-piece"></i> <span class="icon-name">fa-puzzle-piece</span> <span class="icon-value">"\f12e"</span></li>
<li><i class="fa fa-microphone"></i> <span class="icon-name">fa-microphone</span> <span class="icon-value">"\f130"</span></li>
<li><i class="fa fa-microphone-slash"></i> <span class="icon-name">fa-microphone-slash</span> <span class="icon-value">"\f131"</span></li>
<li><i class="fa fa-shield"></i> <span class="icon-name">fa-shield</span> <span class="icon-value">"\f132"</span></li>
<li><i class="fa fa-calendar-o"></i> <span class="icon-name">fa-calendar-o</span> <span class="icon-value">"\f133"</span></li>
<li><i class="fa fa-fire-extinguisher"></i> <span class="icon-name">fa-fire-extinguisher</span> <span class="icon-value">"\f134"</span></li>
<li><i class="fa fa-rocket"></i> <span class="icon-name">fa-rocket</span> <span class="icon-value">"\f135"</span></li>
<li><i class="fa fa-maxcdn"></i> <span class="icon-name">fa-maxcdn</span> <span class="icon-value">"\f136"</span></li>
<li><i class="fa fa-chevron-circle-left"></i> <span class="icon-name">fa-chevron-circle-left</span> <span class="icon-value">"\f137"</span></li>
<li><i class="fa fa-chevron-circle-right"></i> <span class="icon-name">fa-chevron-circle-right</span> <span class="icon-value">"\f138"</span></li>
<li><i class="fa fa-chevron-circle-up"></i> <span class="icon-name">fa-chevron-circle-up</span> <span class="icon-value">"\f139"</span></li>
<li><i class="fa fa-chevron-circle-down"></i> <span class="icon-name">fa-chevron-circle-down</span> <span class="icon-value">"\f13a"</span></li>
<li><i class="fa fa-html5"></i> <span class="icon-name">fa-html5</span> <span class="icon-value">"\f13b"</span></li>
<li><i class="fa fa-css3"></i> <span class="icon-name">fa-css3</span> <span class="icon-value">"\f13c"</span></li>
<li><i class="fa fa-anchor"></i> <span class="icon-name">fa-anchor</span> <span class="icon-value">"\f13d"</span></li>
<li><i class="fa fa-unlock-alt"></i> <span class="icon-name">fa-unlock-alt</span> <span class="icon-value">"\f13e"</span></li>
<li><i class="fa fa-bullseye"></i> <span class="icon-name">fa-bullseye</span> <span class="icon-value">"\f140"</span></li>
<li><i class="fa fa-ellipsis-h"></i> <span class="icon-name">fa-ellipsis-h</span> <span class="icon-value">"\f141"</span></li>
<li><i class="fa fa-ellipsis-v"></i> <span class="icon-name">fa-ellipsis-v</span> <span class="icon-value">"\f142"</span></li>
<li><i class="fa fa-rss-square"></i> <span class="icon-name">fa-rss-square</span> <span class="icon-value">"\f143"</span></li>
<li><i class="fa fa-play-circle"></i> <span class="icon-name">fa-play-circle</span> <span class="icon-value">"\f144"</span></li>
<li><i class="fa fa-ticket"></i> <span class="icon-name">fa-ticket</span> <span class="icon-value">"\f145"</span></li>
<li><i class="fa fa-minus-square"></i> <span class="icon-name">fa-minus-square</span> <span class="icon-value">"\f146"</span></li>
<li><i class="fa fa-minus-square-o"></i> <span class="icon-name">fa-minus-square-o</span> <span class="icon-value">"\f147"</span></li>
<li><i class="fa fa-level-up"></i> <span class="icon-name">fa-level-up</span> <span class="icon-value">"\f148"</span></li>
<li><i class="fa fa-level-down"></i> <span class="icon-name">fa-level-down</span> <span class="icon-value">"\f149"</span></li>
<li><i class="fa fa-check-square"></i> <span class="icon-name">fa-check-square</span> <span class="icon-value">"\f14a"</span></li>
<li><i class="fa fa-pencil-square"></i> <span class="icon-name">fa-pencil-square</span> <span class="icon-value">"\f14b"</span></li>
<li><i class="fa fa-external-link-square"></i> <span class="icon-name">fa-external-link-square</span> <span class="icon-value">"\f14c"</span></li>
<li><i class="fa fa-share-square"></i> <span class="icon-name">fa-share-square</span> <span class="icon-value">"\f14d"</span></li>
<li><i class="fa fa-compass"></i> <span class="icon-name">fa-compass</span> <span class="icon-value">"\f14e"</span></li>
<li><i class="fa fa-caret-square-o-down"></i> <span class="icon-name">fa-caret-square-o-down</span> <span class="icon-value">"\f150"</span></li>
<li><i class="fa fa-caret-square-o-up"></i> <span class="icon-name">fa-caret-square-o-up</span> <span class="icon-value">"\f151"</span></li>
<li><i class="fa fa-caret-square-o-right"></i> <span class="icon-name">fa-caret-square-o-right</span> <span class="icon-value">"\f152"</span></li>
<li><i class="fa fa-eur"></i> <span class="icon-name">fa-eur</span> <span class="icon-value">"\f153"</span></li>
<li><i class="fa fa-gbp"></i> <span class="icon-name">fa-gbp</span> <span class="icon-value">"\f154"</span></li>
<li><i class="fa fa-usd"></i> <span class="icon-name">fa-usd</span> <span class="icon-value">"\f155"</span></li>
<li><i class="fa fa-inr"></i> <span class="icon-name">fa-inr</span> <span class="icon-value">"\f156"</span></li>
<li><i class="fa fa-jpy"></i> <span class="icon-name">fa-jpy</span> <span class="icon-value">"\f157"</span></li>
<li><i class="fa fa-rub"></i> <span class="icon-name">fa-rub</span> <span class="icon-value">"\f158"</span></li>
<li><i class="fa fa-krw"></i> <span class="icon-name">fa-krw</span> <span class="icon-value">"\f159"</span></li>
<li><i class="fa fa-btc"></i> <span class="icon-name">fa-btc</span> <span class="icon-value">"\f15a"</span></li>
<li><i class="fa fa-file"></i> <span class="icon-name">fa-file</span> <span class="icon-value">"\f15b"</span></li>
<li><i class="fa fa-file-text"></i> <span class="icon-name">fa-file-text</span> <span class="icon-value">"\f15c"</span></li>
<li><i class="fa fa-sort-alpha-asc"></i> <span class="icon-name">fa-sort-alpha-asc</span> <span class="icon-value">"\f15d"</span></li>
<li><i class="fa fa-sort-alpha-desc"></i> <span class="icon-name">fa-sort-alpha-desc</span> <span class="icon-value">"\f15e"</span></li>
<li><i class="fa fa-sort-amount-asc"></i> <span class="icon-name">fa-sort-amount-asc</span> <span class="icon-value">"\f160"</span></li>
<li><i class="fa fa-sort-amount-desc"></i> <span class="icon-name">fa-sort-amount-desc</span> <span class="icon-value">"\f161"</span></li>
<li><i class="fa fa-sort-numeric-asc"></i> <span class="icon-name">fa-sort-numeric-asc</span> <span class="icon-value">"\f162"</span></li>
<li><i class="fa fa-sort-numeric-desc"></i> <span class="icon-name">fa-sort-numeric-desc</span> <span class="icon-value">"\f163"</span></li>
<li><i class="fa fa-thumbs-up"></i> <span class="icon-name">fa-thumbs-up</span> <span class="icon-value">"\f164"</span></li>
<li><i class="fa fa-thumbs-down"></i> <span class="icon-name">fa-thumbs-down</span> <span class="icon-value">"\f165"</span></li>
<li><i class="fa fa-youtube-square"></i> <span class="icon-name">fa-youtube-square</span> <span class="icon-value">"\f166"</span></li>
<li><i class="fa fa-youtube"></i> <span class="icon-name">fa-youtube</span> <span class="icon-value">"\f167"</span></li>
<li><i class="fa fa-xing"></i> <span class="icon-name">fa-xing</span> <span class="icon-value">"\f168"</span></li>
<li><i class="fa fa-xing-square"></i> <span class="icon-name">fa-xing-square</span> <span class="icon-value">"\f169"</span></li>
<li><i class="fa fa-youtube-play"></i> <span class="icon-name">fa-youtube-play</span> <span class="icon-value">"\f16a"</span></li>
<li><i class="fa fa-dropbox"></i> <span class="icon-name">fa-dropbox</span> <span class="icon-value">"\f16b"</span></li>
<li><i class="fa fa-stack-overflow"></i> <span class="icon-name">fa-stack-overflow</span> <span class="icon-value">"\f16c"</span></li>
<li><i class="fa fa-instagram"></i> <span class="icon-name">fa-instagram</span> <span class="icon-value">"\f16d"</span></li>
<li><i class="fa fa-flickr"></i> <span class="icon-name">fa-flickr</span> <span class="icon-value">"\f16e"</span></li>
<li><i class="fa fa-adn"></i> <span class="icon-name">fa-adn</span> <span class="icon-value">"\f170"</span></li>
<li><i class="fa fa-bitbucket"></i> <span class="icon-name">fa-bitbucket</span> <span class="icon-value">"\f171"</span></li>
<li><i class="fa fa-bitbucket-square"></i> <span class="icon-name">fa-bitbucket-square</span> <span class="icon-value">"\f172"</span></li>
<li><i class="fa fa-tumblr"></i> <span class="icon-name">fa-tumblr</span> <span class="icon-value">"\f173"</span></li>
<li><i class="fa fa-tumblr-square"></i> <span class="icon-name">fa-tumblr-square</span> <span class="icon-value">"\f174"</span></li>
<li><i class="fa fa-long-arrow-down"></i> <span class="icon-name">fa-long-arrow-down</span> <span class="icon-value">"\f175"</span></li>
<li><i class="fa fa-long-arrow-up"></i> <span class="icon-name">fa-long-arrow-up</span> <span class="icon-value">"\f176"</span></li>
<li><i class="fa fa-long-arrow-left"></i> <span class="icon-name">fa-long-arrow-left</span> <span class="icon-value">"\f177"</span></li>
<li><i class="fa fa-long-arrow-right"></i> <span class="icon-name">fa-long-arrow-right</span> <span class="icon-value">"\f178"</span></li>
<li><i class="fa fa-apple"></i> <span class="icon-name">fa-apple</span> <span class="icon-value">"\f179"</span></li>
<li><i class="fa fa-windows"></i> <span class="icon-name">fa-windows</span> <span class="icon-value">"\f17a"</span></li>
<li><i class="fa fa-android"></i> <span class="icon-name">fa-android</span> <span class="icon-value">"\f17b"</span></li>
<li><i class="fa fa-linux"></i> <span class="icon-name">fa-linux</span> <span class="icon-value">"\f17c"</span></li>
<li><i class="fa fa-dribbble"></i> <span class="icon-name">fa-dribbble</span> <span class="icon-value">"\f17d"</span></li>
<li><i class="fa fa-skype"></i> <span class="icon-name">fa-skype</span> <span class="icon-value">"\f17e"</span></li>
<li><i class="fa fa-foursquare"></i> <span class="icon-name">fa-foursquare</span> <span class="icon-value">"\f180"</span></li>
<li><i class="fa fa-trello"></i> <span class="icon-name">fa-trello</span> <span class="icon-value">"\f181"</span></li>
<li><i class="fa fa-female"></i> <span class="icon-name">fa-female</span> <span class="icon-value">"\f182"</span></li>
<li><i class="fa fa-male"></i> <span class="icon-name">fa-male</span> <span class="icon-value">"\f183"</span></li>
<li><i class="fa fa-gittip"></i> <span class="icon-name">fa-gittip</span> <span class="icon-value">"\f184"</span></li>
<li><i class="fa fa-sun-o"></i> <span class="icon-name">fa-sun-o</span> <span class="icon-value">"\f185"</span></li>
<li><i class="fa fa-moon-o"></i> <span class="icon-name">fa-moon-o</span> <span class="icon-value">"\f186"</span></li>
<li><i class="fa fa-archive"></i> <span class="icon-name">fa-archive</span> <span class="icon-value">"\f187"</span></li>
<li><i class="fa fa-bug"></i> <span class="icon-name">fa-bug</span> <span class="icon-value">"\f188"</span></li>
<li><i class="fa fa-vk"></i> <span class="icon-name">fa-vk</span> <span class="icon-value">"\f189"</span></li>
<li><i class="fa fa-weibo"></i> <span class="icon-name">fa-weibo</span> <span class="icon-value">"\f18a"</span></li>
<li><i class="fa fa-renren"></i> <span class="icon-name">fa-renren</span> <span class="icon-value">"\f18b"</span></li>
<li><i class="fa fa-pagelines"></i> <span class="icon-name">fa-pagelines</span> <span class="icon-value">"\f18c"</span></li>
<li><i class="fa fa-stack-exchange"></i> <span class="icon-name">fa-stack-exchange</span> <span class="icon-value">"\f18d"</span></li>
<li><i class="fa fa-arrow-circle-o-right"></i> <span class="icon-name">fa-arrow-circle-o-right</span> <span class="icon-value">"\f18e"</span></li>
<li><i class="fa fa-arrow-circle-o-left"></i> <span class="icon-name">fa-arrow-circle-o-left</span> <span class="icon-value">"\f190"</span></li>
<li><i class="fa fa-caret-square-o-left"></i> <span class="icon-name">fa-caret-square-o-left</span> <span class="icon-value">"\f191"</span></li>
<li><i class="fa fa-dot-circle-o"></i> <span class="icon-name">fa-dot-circle-o</span> <span class="icon-value">"\f192"</span></li>
<li><i class="fa fa-wheelchair"></i> <span class="icon-name">fa-wheelchair</span> <span class="icon-value">"\f193"</span></li>
<li><i class="fa fa-vimeo-square"></i> <span class="icon-name">fa-vimeo-square</span> <span class="icon-value">"\f194"</span></li>
<li><i class="fa fa-try"></i> <span class="icon-name">fa-try</span> <span class="icon-value">"\f195"</span></li>
<li><i class="fa fa-plus-square-o"></i> <span class="icon-name">fa-plus-square-o</span> <span class="icon-value">"\f196"</span></li>
<li><i class="fa fa-space-shuttle"></i> <span class="icon-name">fa-space-shuttle</span> <span class="icon-value">"\f197"</span></li>
<li><i class="fa fa-slack"></i> <span class="icon-name">fa-slack</span> <span class="icon-value">"\f198"</span></li>
<li><i class="fa fa-envelope-square"></i> <span class="icon-name">fa-envelope-square</span> <span class="icon-value">"\f199"</span></li>
<li><i class="fa fa-wordpress"></i> <span class="icon-name">fa-wordpress</span> <span class="icon-value">"\f19a"</span></li>
<li><i class="fa fa-openid"></i> <span class="icon-name">fa-openid</span> <span class="icon-value">"\f19b"</span></li>
<li><i class="fa fa-university"></i> <span class="icon-name">fa-university</span> <span class="icon-value">"\f19c"</span></li>
<li><i class="fa fa-graduation-cap"></i> <span class="icon-name">fa-graduation-cap</span> <span class="icon-value">"\f19d"</span></li>
<li><i class="fa fa-yahoo"></i> <span class="icon-name">fa-yahoo</span> <span class="icon-value">"\f19e"</span></li>
<li><i class="fa fa-google"></i> <span class="icon-name">fa-google</span> <span class="icon-value">"\f1a0"</span></li>
<li><i class="fa fa-reddit"></i> <span class="icon-name">fa-reddit</span> <span class="icon-value">"\f1a1"</span></li>
<li><i class="fa fa-reddit-square"></i> <span class="icon-name">fa-reddit-square</span> <span class="icon-value">"\f1a2"</span></li>
<li><i class="fa fa-stumbleupon-circle"></i> <span class="icon-name">fa-stumbleupon-circle</span> <span class="icon-value">"\f1a3"</span></li>
<li><i class="fa fa-stumbleupon"></i> <span class="icon-name">fa-stumbleupon</span> <span class="icon-value">"\f1a4"</span></li>
<li><i class="fa fa-delicious"></i> <span class="icon-name">fa-delicious</span> <span class="icon-value">"\f1a5"</span></li>
<li><i class="fa fa-digg"></i> <span class="icon-name">fa-digg</span> <span class="icon-value">"\f1a6"</span></li>
<li><i class="fa fa-pied-piper"></i> <span class="icon-name">fa-pied-piper</span> <span class="icon-value">"\f1a7"</span></li>
<li><i class="fa fa-pied-piper-alt"></i> <span class="icon-name">fa-pied-piper-alt</span> <span class="icon-value">"\f1a8"</span></li>
<li><i class="fa fa-drupal"></i> <span class="icon-name">fa-drupal</span> <span class="icon-value">"\f1a9"</span></li>
<li><i class="fa fa-joomla"></i> <span class="icon-name">fa-joomla</span> <span class="icon-value">"\f1aa"</span></li>
<li><i class="fa fa-language"></i> <span class="icon-name">fa-language</span> <span class="icon-value">"\f1ab"</span></li>
<li><i class="fa fa-fax"></i> <span class="icon-name">fa-fax</span> <span class="icon-value">"\f1ac"</span></li>
<li><i class="fa fa-building"></i> <span class="icon-name">fa-building</span> <span class="icon-value">"\f1ad"</span></li>
<li><i class="fa fa-child"></i> <span class="icon-name">fa-child</span> <span class="icon-value">"\f1ae"</span></li>
<li><i class="fa fa-paw"></i> <span class="icon-name">fa-paw</span> <span class="icon-value">"\f1b0"</span></li>
<li><i class="fa fa-spoon"></i> <span class="icon-name">fa-spoon</span> <span class="icon-value">"\f1b1"</span></li>
<li><i class="fa fa-cube"></i> <span class="icon-name">fa-cube</span> <span class="icon-value">"\f1b2"</span></li>
<li><i class="fa fa-cubes"></i> <span class="icon-name">fa-cubes</span> <span class="icon-value">"\f1b3"</span></li>
<li><i class="fa fa-behance"></i> <span class="icon-name">fa-behance</span> <span class="icon-value">"\f1b4"</span></li>
<li><i class="fa fa-behance-square"></i> <span class="icon-name">fa-behance-square</span> <span class="icon-value">"\f1b5"</span></li>
<li><i class="fa fa-steam"></i> <span class="icon-name">fa-steam</span> <span class="icon-value">"\f1b6"</span></li>
<li><i class="fa fa-steam-square"></i> <span class="icon-name">fa-steam-square</span> <span class="icon-value">"\f1b7"</span></li>
<li><i class="fa fa-recycle"></i> <span class="icon-name">fa-recycle</span> <span class="icon-value">"\f1b8"</span></li>
<li><i class="fa fa-car"></i> <span class="icon-name">fa-car</span> <span class="icon-value">"\f1b9"</span></li>
<li><i class="fa fa-taxi"></i> <span class="icon-name">fa-taxi</span> <span class="icon-value">"\f1ba"</span></li>
<li><i class="fa fa-tree"></i> <span class="icon-name">fa-tree</span> <span class="icon-value">"\f1bb"</span></li>
<li><i class="fa fa-spotify"></i> <span class="icon-name">fa-spotify</span> <span class="icon-value">"\f1bc"</span></li>
<li><i class="fa fa-deviantart"></i> <span class="icon-name">fa-deviantart</span> <span class="icon-value">"\f1bd"</span></li>
<li><i class="fa fa-soundcloud"></i> <span class="icon-name">fa-soundcloud</span> <span class="icon-value">"\f1be"</span></li>
<li><i class="fa fa-database"></i> <span class="icon-name">fa-database</span> <span class="icon-value">"\f1c0"</span></li>
<li><i class="fa fa-file-pdf-o"></i> <span class="icon-name">fa-file-pdf-o</span> <span class="icon-value">"\f1c1"</span></li>
<li><i class="fa fa-file-word-o"></i> <span class="icon-name">fa-file-word-o</span> <span class="icon-value">"\f1c2"</span></li>
<li><i class="fa fa-file-excel-o"></i> <span class="icon-name">fa-file-excel-o</span> <span class="icon-value">"\f1c3"</span></li>
<li><i class="fa fa-file-powerpoint-o"></i> <span class="icon-name">fa-file-powerpoint-o</span> <span class="icon-value">"\f1c4"</span></li>
<li><i class="fa fa-file-image-o"></i> <span class="icon-name">fa-file-image-o</span> <span class="icon-value">"\f1c5"</span></li>
<li><i class="fa fa-file-archive-o"></i> <span class="icon-name">fa-file-archive-o</span> <span class="icon-value">"\f1c6"</span></li>
<li><i class="fa fa-file-audio-o"></i> <span class="icon-name">fa-file-audio-o</span> <span class="icon-value">"\f1c7"</span></li>
<li><i class="fa fa-file-video-o"></i> <span class="icon-name">fa-file-video-o</span> <span class="icon-value">"\f1c8"</span></li>
<li><i class="fa fa-file-code-o"></i> <span class="icon-name">fa-file-code-o</span> <span class="icon-value">"\f1c9"</span></li>
<li><i class="fa fa-vine"></i> <span class="icon-name">fa-vine</span> <span class="icon-value">"\f1ca"</span></li>
<li><i class="fa fa-codepen"></i> <span class="icon-name">fa-codepen</span> <span class="icon-value">"\f1cb"</span></li>
<li><i class="fa fa-jsfiddle"></i> <span class="icon-name">fa-jsfiddle</span> <span class="icon-value">"\f1cc"</span></li>
<li><i class="fa fa-life-ring"></i> <span class="icon-name">fa-life-ring</span> <span class="icon-value">"\f1cd"</span></li>
<li><i class="fa fa-circle-o-notch"></i> <span class="icon-name">fa-circle-o-notch</span> <span class="icon-value">"\f1ce"</span></li>
<li><i class="fa fa-rebel"></i> <span class="icon-name">fa-rebel</span> <span class="icon-value">"\f1d0"</span></li>
<li><i class="fa fa-empire"></i> <span class="icon-name">fa-empire</span> <span class="icon-value">"\f1d1"</span></li>
<li><i class="fa fa-git-square"></i> <span class="icon-name">fa-git-square</span> <span class="icon-value">"\f1d2"</span></li>
<li><i class="fa fa-git"></i> <span class="icon-name">fa-git</span> <span class="icon-value">"\f1d3"</span></li>
<li><i class="fa fa-hacker-news"></i> <span class="icon-name">fa-hacker-news</span> <span class="icon-value">"\f1d4"</span></li>
<li><i class="fa fa-tencent-weibo"></i> <span class="icon-name">fa-tencent-weibo</span> <span class="icon-value">"\f1d5"</span></li>
<li><i class="fa fa-qq"></i> <span class="icon-name">fa-qq</span> <span class="icon-value">"\f1d6"</span></li>
<li><i class="fa fa-weixin"></i> <span class="icon-name">fa-weixin</span> <span class="icon-value">"\f1d7"</span></li>
<li><i class="fa fa-paper-plane"></i> <span class="icon-name">fa-paper-plane</span> <span class="icon-value">"\f1d8"</span></li>
<li><i class="fa fa-paper-plane-o"></i> <span class="icon-name">fa-paper-plane-o</span> <span class="icon-value">"\f1d9"</span></li>
<li><i class="fa fa-history"></i> <span class="icon-name">fa-history</span> <span class="icon-value">"\f1da"</span></li>
<li><i class="fa fa-circle-thin"></i> <span class="icon-name">fa-circle-thin</span> <span class="icon-value">"\f1db"</span></li>
<li><i class="fa fa-header"></i> <span class="icon-name">fa-header</span> <span class="icon-value">"\f1dc"</span></li>
<li><i class="fa fa-paragraph"></i> <span class="icon-name">fa-paragraph</span> <span class="icon-value">"\f1dd"</span></li>
<li><i class="fa fa-sliders"></i> <span class="icon-name">fa-sliders</span> <span class="icon-value">"\f1de"</span></li>
<li><i class="fa fa-share-alt"></i> <span class="icon-name">fa-share-alt</span> <span class="icon-value">"\f1e0"</span></li>
<li><i class="fa fa-share-alt-square"></i> <span class="icon-name">fa-share-alt-square</span> <span class="icon-value">"\f1e1"</span></li>
<li><i class="fa fa-bomb"></i> <span class="icon-name">fa-bomb</span> <span class="icon-value">"\f1e2"</span></li>
<li><i class="fa fa-futbol-o"></i> <span class="icon-name">fa-futbol-o</span> <span class="icon-value">"\f1e3"</span></li>
<li><i class="fa fa-tty"></i> <span class="icon-name">fa-tty</span> <span class="icon-value">"\f1e4"</span></li>
<li><i class="fa fa-binoculars"></i> <span class="icon-name">fa-binoculars</span> <span class="icon-value">"\f1e5"</span></li>
<li><i class="fa fa-plug"></i> <span class="icon-name">fa-plug</span> <span class="icon-value">"\f1e6"</span></li>
<li><i class="fa fa-slideshare"></i> <span class="icon-name">fa-slideshare</span> <span class="icon-value">"\f1e7"</span></li>
<li><i class="fa fa-twitch"></i> <span class="icon-name">fa-twitch</span> <span class="icon-value">"\f1e8"</span></li>
<li><i class="fa fa-yelp"></i> <span class="icon-name">fa-yelp</span> <span class="icon-value">"\f1e9"</span></li>
<li><i class="fa fa-newspaper-o"></i> <span class="icon-name">fa-newspaper-o</span> <span class="icon-value">"\f1ea"</span></li>
<li><i class="fa fa-wifi"></i> <span class="icon-name">fa-wifi</span> <span class="icon-value">"\f1eb"</span></li>
<li><i class="fa fa-calculator"></i> <span class="icon-name">fa-calculator</span> <span class="icon-value">"\f1ec"</span></li>
<li><i class="fa fa-paypal"></i> <span class="icon-name">fa-paypal</span> <span class="icon-value">"\f1ed"</span></li>
<li><i class="fa fa-google-wallet"></i> <span class="icon-name">fa-google-wallet</span> <span class="icon-value">"\f1ee"</span></li>
<li><i class="fa fa-cc-visa"></i> <span class="icon-name">fa-cc-visa</span> <span class="icon-value">"\f1f0"</span></li>
<li><i class="fa fa-cc-mastercard"></i> <span class="icon-name">fa-cc-mastercard</span> <span class="icon-value">"\f1f1"</span></li>
<li><i class="fa fa-cc-discover"></i> <span class="icon-name">fa-cc-discover</span> <span class="icon-value">"\f1f2"</span></li>
<li><i class="fa fa-cc-amex"></i> <span class="icon-name">fa-cc-amex</span> <span class="icon-value">"\f1f3"</span></li>
<li><i class="fa fa-cc-paypal"></i> <span class="icon-name">fa-cc-paypal</span> <span class="icon-value">"\f1f4"</span></li>
<li><i class="fa fa-cc-stripe"></i> <span class="icon-name">fa-cc-stripe</span> <span class="icon-value">"\f1f5"</span></li>
<li><i class="fa fa-bell-slash"></i> <span class="icon-name">fa-bell-slash</span> <span class="icon-value">"\f1f6"</span></li>
<li><i class="fa fa-bell-slash-o"></i> <span class="icon-name">fa-bell-slash-o</span> <span class="icon-value">"\f1f7"</span></li>
<li><i class="fa fa-trash"></i> <span class="icon-name">fa-trash</span> <span class="icon-value">"\f1f8"</span></li>
<li><i class="fa fa-copyright"></i> <span class="icon-name">fa-copyright</span> <span class="icon-value">"\f1f9"</span></li>
<li><i class="fa fa-at"></i> <span class="icon-name">fa-at</span> <span class="icon-value">"\f1fa"</span></li>
<li><i class="fa fa-eyedropper"></i> <span class="icon-name">fa-eyedropper</span> <span class="icon-value">"\f1fb"</span></li>
<li><i class="fa fa-paint-brush"></i> <span class="icon-name">fa-paint-brush</span> <span class="icon-value">"\f1fc"</span></li>
<li><i class="fa fa-birthday-cake"></i> <span class="icon-name">fa-birthday-cake</span> <span class="icon-value">"\f1fd"</span></li>
<li><i class="fa fa-area-chart"></i> <span class="icon-name">fa-area-chart</span> <span class="icon-value">"\f1fe"</span></li>
<li><i class="fa fa-pie-chart"></i> <span class="icon-name">fa-pie-chart</span> <span class="icon-value">"\f200"</span></li>
<li><i class="fa fa-line-chart"></i> <span class="icon-name">fa-line-chart</span> <span class="icon-value">"\f201"</span></li>
<li><i class="fa fa-lastfm"></i> <span class="icon-name">fa-lastfm</span> <span class="icon-value">"\f202"</span></li>
<li><i class="fa fa-lastfm-square"></i> <span class="icon-name">fa-lastfm-square</span> <span class="icon-value">"\f203"</span></li>
<li><i class="fa fa-toggle-off"></i> <span class="icon-name">fa-toggle-off</span> <span class="icon-value">"\f204"</span></li>
<li><i class="fa fa-toggle-on"></i> <span class="icon-name">fa-toggle-on</span> <span class="icon-value">"\f205"</span></li>
<li><i class="fa fa-bicycle"></i> <span class="icon-name">fa-bicycle</span> <span class="icon-value">"\f206"</span></li>
<li><i class="fa fa-bus"></i> <span class="icon-name">fa-bus</span> <span class="icon-value">"\f207"</span></li>
<li><i class="fa fa-ioxhost"></i> <span class="icon-name">fa-ioxhost</span> <span class="icon-value">"\f208"</span></li>
<li><i class="fa fa-angellist"></i> <span class="icon-name">fa-angellist</span> <span class="icon-value">"\f209"</span></li>
<li><i class="fa fa-cc"></i> <span class="icon-name">fa-cc</span> <span class="icon-value">"\f20a"</span></li>
<li><i class="fa fa-ils"></i> <span class="icon-name">fa-ils</span> <span class="icon-value">"\f20b"</span></li>
<li><i class="fa fa-meanpath"></i> <span class="icon-name">fa-meanpath</span> <span class="icon-value">"\f20c"</span></li>
</ul>
</div>
<style scoped="" type="text/css">
/* FONT AWESOME ARLINA DZGN */
#outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
#comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;}
.post img{background:#fff;}
#part-aside {box-shadow: 0 0 10px 5px #ddd;}
#article {background:#fff;}
.post {background:#fff;}
.post-inner {padding:15px 0 0 0;}
#font-awesome-list{margin-top:3em}#font-awesome-list ul{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:40px;-moz-column-gap:40px;column-gap:40px}
#font-awesome-list li{list-style:none;padding:6px;border-radius:4px;transition:initial;}
#font-awesome-list li:before{display:none;width:0;height:0}
#font-awesome-list li i:before{font-size:24px;font-size:1.5rem;position:relative;top:4px;color:#666}
#font-awesome-list li:hover{background-color:#ff69b4;color:#fff;transition:initial;}
#font-awesome-list li:hover i:before{color:#fff}
#font-awesome-list span{display:inline-block;font-family:'Open Sans',sans-serif;font-size:13px;font-size:.8125rem;transition:initial;}
#font-awesome-list span:hover{transition:initial;}
#font-awesome-list i{width:30px;text-align:center;margin-right:20px}
#font-awesome-list .icon-name{width:180px;text-align:left;transition:initial;}
#font-awesome-list .icon-name:hover{transition:initial;}
#font-awesome-list .icon-value,#font-awesome-list .icon-value:hover{transition:initial;}
</style>
Sebelum mempublish halaman, kamu juga dapat untuk melakukan pratinjau halaman terlebih dahulu, agar kamu dapat melihat hasilnya tanpa perlu dipublish. Sekian tutorial cara membuat halaman icon Fontawesome di blog yang dapat saya bagikan, dan semoga bermanfaat :D.
Mantap sekali hu lanjutkan....
ReplyDeleteKeren nih..
ReplyDelete