Firman Webs

Home All post with category Bootstrap

Kombinasi CSS Button Flat UI Dengan Font Awesome

Saturday, 22 February 2014

Kombinasi CSS Button Flat UI Dengan Font Awesome – tutorial ini sekaligus untuk menjawab salah satu pertanyaan dari brother <a href="http://mas-andes.blogspot.com/2014/02/jquery-fadein-fadeout-page-load-blog.html?showComment=1392106487229#c8775829991683631331" target="_blank">Tenri Baso</a> yang menanyakan di artikel sebelumnya, karena pada artikel tersebut tidak sesuai tema konten yang dibahas jadi alangkah baiknya jika saya jawab pada artikel ini. Dengan adanya font awesome saya rasa sangat memudahkan untuk keperluan berbagai hal dan tanpa perlu adanya penggunaan gambar sehingga sangat efektif penggunaannya. Beberapa waktu lalu pernah saya bagikan tutorial untuk <a href="http://mas-andes.blogspot.com/2013/10/membuat-tombol-share-di-bawah-posting-blog.html" target="_blank" title="membuat tombol share dibawah posting blog">membuat tombol share dibawah posting blog</a>, apabila ingin menggantinya dengan kombinasi font awesome seperti yang saya gunakan pada blog ini langkah-langkah penerapannya masih sama seperti pada tutorial sebelumnya. Namun pastikan terlebih dahulu sudah terpasang font awesome didalam template sebelum mengikuti langkah-langkah di bawah. Apabila belum pernah memasang bisa melihat di tutorial sebelumnya tentang <a href="http://mas-andes.blogspot.com/2013/12/list-icon-font-awesome-dan-css-value.html" target="_blank" title="cara memasang dan menggunakan font awesome">cara memasang dan menggunakan font awesome</a>, disitu juga terdapat list icon font awesome yang bisa dijadikan panduan untuk melihat nama icon. Apabila sudah terpasang bisa dilanjutkan dengan tutorial dibawah ini untuk memodifikasi button dengan kombinasi font awesome. <h2>CSS Social Share Button</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3TMl86S63FXHRDBkpw7jRFJvSWLHSiMMMF3r2DeIwcaMVHks9u4YI9Rm6ShkISdZ4i4G-T5tLJV38lBrPn9ggTezLf4X-pLQPZn3qYSzeBJJTBVIB0EPMp5JJN5hHPqyDck1gxcGk2Zg/s1600/social-share-button-flat-ui.gif" class="center" ><img alt="CSS Social Share Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3TMl86S63FXHRDBkpw7jRFJvSWLHSiMMMF3r2DeIwcaMVHks9u4YI9Rm6ShkISdZ4i4G-T5tLJV38lBrPn9ggTezLf4X-pLQPZn3qYSzeBJJTBVIB0EPMp5JJN5hHPqyDck1gxcGk2Zg/s1600/social-share-button-flat-ui.gif" title="CSS Social Share Button"/></a>Button yang pertama adalah untuk widget social share. Karena sudah ada dibawah posting blog ini jadi saya rasa tidak perlu lagi untuk membuat demo, bisa dilihat langsung di akhir artikel. Berikut cara memasang widget social share dengan kombinasi font awesome. Untuk kode CSS seperti biasa, taruh di atas kode <code>]]></b:skin></code> atau <code></style></code> <pre data-codetype="CSS"> #button-share{background:#34495e;color:#fff;line-height:40px;padding-left:60px} #button-share h4{font-size:18px;line-height:40px;margin:0;text-transform:uppercase;display:inline} #button-share h4 span{background:#2c3e50} #button-share a{position:relative;font:normal 16px/20px 'Yanone Kaffeesatz',sans-serif;color:#fff;text-transform:uppercase;padding:7px 10px 7px 50px;box-shadow:1px 1px 1px #222} #button-share a:hover{background:#222}#button-share a:hover span{color:#222} #button-share a span{line-height:20px;width:40px;padding:6px 0;top:0} #button-share a span.fb{background:#2884f6}.fb{background:#1e90ff} #button-share a span.tw{background:#45B0E3}.tw{background:#00bfff} #button-share a span.gp{background:#e00}.gp{background:#f83124} #button-share a span.me{background:#f39c12}.me{background:#f1c40f} </pre>Sedangkan kode HTML bisa taruh di bawah kode <code><data:post.body/></code> atau bisa juga <code><div class='post-footer'></code> sesuaikan template masing-masing saja, Selanjutnya simpan template. <pre data-codetype="HTML"> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='button-share'> <h4> Share artikel ke :</h4> <a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'> Facebook</a> <a class='tw' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'> Twitter</a> <a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'> Google+</a> <script> //<![CDATA[ var uri = window.location.href; var ttle = document.title; document.write("<a class='me' href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' title='Share ke Lintasme' rel='nofollow'> Lintasme</a>"); //]]> </script> </div> </b:if> </pre><h2>CSS Like Button Count (Efek Sliding)</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU-PwmlL2q-8JnLFS5gj5aVwRfdnLcIBth5ZAeylGh8n42KJSq9oHy-HWln04vdZJo0Xla1NI_ZMBBv7evBDTWH984pGS_t9bRhRa9ZmjzXrmG-oVljEO-tRAgUCFfXL393gcwFt2cbo/s1600/flat+ui+like+count+button.gif" class="center" ><img alt="CSS Like Button Count (Efek Sliding)" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU-PwmlL2q-8JnLFS5gj5aVwRfdnLcIBth5ZAeylGh8n42KJSq9oHy-HWln04vdZJo0Xla1NI_ZMBBv7evBDTWH984pGS_t9bRhRa9ZmjzXrmG-oVljEO-tRAgUCFfXL393gcwFt2cbo/s1600/flat+ui+like+count+button.gif" title="CSS Like Button Count (Efek Sliding)" width="600"/></a>Tombol like button biasanya terpasang dibawah post artikel yang digunakan untuk menampilkan banyaknya jumlah pengunjung yang menyukai artikel tersebut baik itu melalui button like Facebook, Google Plus maupun Twitter. Untuk membuat tampilan button like count agar lebih menarik dapat menggunakan CSS untuk mengatur tampilan dari widget ini. Penerapannya sama seperti pada tombol social share di atas. <pre data-codetype="CSS"> #button-count{width:100%;overflow:hidden;background:#34495E;margin:10px 0;padding:3px} #button-count span{float:left;position:relative;font-size:16px;color:#fff;margin:12px 10px 12px 5px} .button{background:#DCE0E0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:156px;margin:4px} .ikons{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;text-align:center} .ikons i{color:#fff;line-height:42px} .slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:118px;margin:0} .slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0} .button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out} .facebook .fb_iframe_widget{display:block;position:absolute;right:5px;top:0;z-index:1} .twitter iframe{left:50px;top:10px;z-index:1;display:block;position:absolute} .google #___plusone_0{width:90px!important;top:10px;right:5px;position:absolute;display:block;z-index:1} .facebook .ikons,.facebook .slide{background:#305c99} .twitter .ikons,.twitter .slide{background:#00cdff} .google .ikons,.google .slide{background:#d24228} .facebook:hover .slide,.twitter:hover .slide,.google:hover .slide{left:180px} </pre> <pre data-codetype="HTML"> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='button-count'> BAGIKAN: <div class='facebook button'> <div class='slide'> Like </div> <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/> </div> <div class='google button'> <div class='slide'> +1 </div>  <div class='g-plusone' data-size='medium'/>  <script src='https://apis.google.com/js/platform.js' type='text/javascript'> {lang: &#39;id&#39;} </script> </div> <div class='twitter button'> <div class='slide'> Tweet </div> <a class='twitter-share-button' data-count='horizontal' href='https://twitter.com/share'>Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script> </div> </div> </b:if> </pre><h2>CSS Post Button</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnzmm_QJiBjWa8jxCAe5HBd-d4EGBTzIIh2fshXrJBCR6lesNtDGePO7YmzodQMNdcTe-zBNf7QsMAmg0bD1Y5quEEsMi5MthoUjhBudNY8EE4KPPCsqLtheFhJZAszr1cI2ErZUR-Dvg/s1600/css-button-flat-ui.gif" class="center" ><img alt="CSS Button Flat UI" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnzmm_QJiBjWa8jxCAe5HBd-d4EGBTzIIh2fshXrJBCR6lesNtDGePO7YmzodQMNdcTe-zBNf7QsMAmg0bD1Y5quEEsMi5MthoUjhBudNY8EE4KPPCsqLtheFhJZAszr1cI2ErZUR-Dvg/s1600/css-button-flat-ui.gif" title="CSS Button Flat UI"/></a>Button yang ini adalah button yang saya gunakan pada area posting, untuk membuat tombol demo, dll. Penerapannya ke dalam blog, taruh kode CSS seperti langkah di atas. Sedangkan untuk HTML, taruh kedalam post area mode HTML. <pre data-codetype="CSS"> .bton-grup{width:500px;text-align:center;margin:5px auto} .bton{display:inline-block;height:50px;line-height:50px;padding-right:20px;padding-left:70px;position:relative;background:#1abc9c;color:#fff;font-size:22px;font-family:'Yanone Kaffeesatz',sans-serif;text-transform:uppercase;letter-spacing:1px;margin:5px;border-radius:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);box-shadow:0 2px 2px rgba(0,0,0,0.2)} .bton span{text-align: center;position:absolute;left:0;width:50px;background:rgba(0,0,0,0.5);border-top-left-radius:1px;border-bottom-left-radius:1px;border-right:1px solid rgba(0,0,0,0.15)} .bton:hover span{background:#222;border-right:1px solid rgba(0,0,0,0.3)} .bton.orange{background:#FF7F00} .bton.purple{background:#8e44ad} .bton.blue{background:#297fb8} .bton.red{background:#e74c3c} </pre> <pre data-codetype="HTML"> <div class='bton-grup'> <a href='http://mas-andes.blogspot.com' class='bton'>Example</a> <a href='http://mas-andes.blogspot.com' class='bton orange'>Example</a> <a href='http://mas-andes.blogspot.com' class='bton purple'>Example</a> <a href='http://mas-andes.blogspot.com' class='bton blue'>Example</a> <a href='http://mas-andes.blogspot.com' class='bton red'>Example</a> </div> </pre>Demikianlah cara mengcustom button agar sedikit lebih menarik dan selanjutnya silahkan bisa di kreasikan sendiri di blog masing-masing.

Kombinasi CSS Button Flat UI Dengan Font Awesome – tutorial ini sekaligus untuk menjawab salah satu …

List Icon Font Awesome dan CSS Value Content V4.0.3

Sunday, 29 December 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxGbO8ABWT7XZFkSTHOVkJxQWSvySMMeEAeXLekR2aV5zZMFcwCbaFivdWgrBBYgcCf5SdU3HTr8aetTvhsZhIf0MvO9vSbODfsJN0P2l2G54Xd9qjWw6qAzkUWMIaq2fJbhnvotacXE/s1600/font-awesome.gif" class="center" ><img alt="List Icon Font Awesome dan CSS Value Content V4.0.3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxGbO8ABWT7XZFkSTHOVkJxQWSvySMMeEAeXLekR2aV5zZMFcwCbaFivdWgrBBYgcCf5SdU3HTr8aetTvhsZhIf0MvO9vSbODfsJN0P2l2G54Xd9qjWw6qAzkUWMIaq2fJbhnvotacXE/s640/font-awesome.gif" title="List Icon Font Awesome dan CSS Value Content V4.0.3"/></a>List Icon Font Awesome dan CSS Value Content V4.0.3 sedikit mau berbagi setelah lama tidak menjamah dunia blogging dan mengupdate blog ini. Pada artikel ini bagi yang suka bermain main dengan desain blog maka pilihan tepat untuk menambah pernak-pernik pada elemen-elemen tertentu hingga sampai yang mendetail dengan menggunakan Font Awesome untuk melengkapi maupun mempercantik blog. Font Awesome versi 4.0.3 merupakan update dari versi sebelumnya, dan terdapat 11 icon baru pada Font Awesome V4.0.3 dan juga pembaharuan nama icon. Font Awesome merupakan font web yang mengagumkan dan mengandung semua ikon dari kerangka Twitter Bootstrap, dan sekarang lebih banyak lagi icon-icon lain hanya dengan menambah satu styleshet pada template maka anda bisa menggunakan 369 icon. Agar bisa menggunakan Font Awesome, maka anda perlu menambahkan styleshet dibawah ini kemudian menyimpannya di atas kode <code></head></code><pre><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/></pre>Cara penggunaanya didalam HTML anda hanya perlu menambahkan tag <code></code> kemudian class dari nama icon yang dipilih. Misal untuk cara penulisannya seperti dibawah ini: fa-html5 <pre> fa-html5</pre>Untuk memperbesar ukuran, maka anda hanya perlu menambahkan class <code>fa-lg</code>, <code>fa-1x</code>, <code>fa-2x</code>, <code>fa-3x</code>, <code>fa-4x</code>, <code>fa-5x</code> dan berikut contohnya: fa-html5 fa-html5 fa-html5 fa-html5 fa-html5<pre> fa-html5 fa-html5 fa-html5 fa-html5 fa-html5 </pre>Gunakan class <code>fa-ul</code> dan <code>fa-li</code> untuk mempermudah dalam membuat daftar list dan menentukan nama icon. <ul class="fa-ul"> <li>fa-check-square</li> <li>fa-check-square</li> <li>fa-spinner fa-spin</li> <li>fa-square</li></ul><pre> <ul class="fa-ul"> <li>fa-check-square</li> <li>fa-check-square</li> <li>fa-spinner fa-spin</li> <li>fa-square</li> </ul> </pre>Gunakan class <code>pull-right</code> atau <code>pull-left</code> untuk membuat icon berada di sebelah kanan atau sebelah kiri, sedangkan <code>fa-border</code> adalah untuk membuat border pada icon tersebut. Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right. <pre> Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right. </pre>Gunakan class <code>fa-spin</code> untuk membuat icon agar bisa berputar. Ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-gigi agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di IE8 - IE9. <pre> </pre>Untuk memutar atau membalik icon, gunakan class <code>fa-rotate-*</code> dan <code>fa-flip-*</code>. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate.   normal   fa-rotate-90   fa-rotate-180   fa-rotate-270   fa-flip-horizontal   icon-flip-vertical <pre> &nbsp; normal &nbsp; fa-rotate-90 &nbsp; fa-rotate-180 &nbsp; fa-rotate-270 &nbsp; fa-flip-horizontal &nbsp; icon-flip-vertical </pre>Diatas adalah cara dimana untuk menuliskan Font Awesome didalam sebuah markup HTML, masih banyak lagi tips trik lainnya yang bisa digunakan didalam Font Awesome. Untuk lebih jelasnya bisa mencoba dan berkreasi sendiri agar bisa lebih memahami bermain-main dengan berbagai komponen Bootstrap. Bahkan dengan cara lain anda juga bisa untuk menambahkan icon Font Awesome didalam CSS pada pseudo elemen <code>:before</code> dengan menuliskan value content dari icon tersebut. Berikut skema penggunaan Font Awesome pada pseudo elemen CSS: <pre> .element{ position: relative; } /* ganti tulisan berwarna merah pada value content */ .element:before { content: "\f000"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; /*--custom pada CSS--*/ color: #000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; left: 0; } </pre>Setelah mengetahui cara penggunaan dari Font Awesome baik itu pada CSS maupun HTML maka berikut adalah list dari icon Font Awesome versi 4.0.3 beserta CSS value content. <h3>List Icon Font Awesome dan CSS Value Content V4.0.3</h3> <ul class="kiri"> <li>  fa-glass "\f000" </li> <li>  fa-music "\f001" </li> <li>  fa-search "\f002" </li> <li>  fa-envelope-o "\f003" </li> <li>  fa-heart "\f004" </li> <li>  fa-star "\f005" </li> <li>  fa-star-o "\f006" </li> <li>  fa-user "\f007" </li> <li>  fa-film "\f008" </li> <li>  fa-th-large "\f009" </li> <li>  fa-th "\f00a" </li> <li>  fa-th-list "\f00b" </li> <li>  fa-check "\f00c" </li> <li>  fa-times "\f00d" </li> <li>  fa-search-plus "\f00e" </li> <li>  fa-search-minus "\f010" </li> <li>  fa-power-off "\f011" </li> <li>  fa-signal "\f012" </li> <li>  fa-cog "\f013" </li> <li>  fa-trash-o "\f014" </li> <li>  fa-home "\f015" </li> <li>  fa-file-o "\f016" </li> <li>  fa-clock-o "\f017" </li> <li>  fa-road "\f018" </li> <li>  fa-download "\f019" </li> <li>  fa-arrow-circle-o-down "\f01a" </li> <li>  fa-arrow-circle-o-up "\f01b" </li> <li>  fa-inbox "\f01c" </li> <li>  fa-play-circle-o "\f01d" </li> <li>  fa-repeat "\f01e" </li> <li>  fa-refresh "\f021" </li> <li>  fa-list-alt "\f022" </li> <li>  fa-lock "\f023" </li> <li>  fa-flag "\f024" </li> <li>  fa-headphones "\f025" </li> <li>  fa-volume-off "\f026" </li> <li>  fa-volume-down "\f027" </li> <li>  fa-volume-up "\f028" </li> <li>  fa-qrcode "\f029" </li> <li>  fa-barcode "\f02a" </li> <li>  fa-tag "\f02b" </li> <li>  fa-tags "\f02c" </li> <li>  fa-book "\f02d" </li> <li>  fa-bookmark "\f02e" </li> <li>  fa-print "\f02f" </li> <li>  fa-camera "\f030" </li> <li>  fa-font "\f031" </li> <li>  fa-bold "\f032" </li> <li>  fa-italic "\f033" </li> <li>  fa-text-height "\f034" </li> <li>  fa-text-width "\f035" </li> <li>  fa-align-left "\f036" </li> <li>  fa-align-center "\f037" </li> <li>  fa-align-right "\f038" </li> <li>  fa-align-justify "\f039" </li> <li>  fa-list "\f03a" </li> <li>  fa-outdent "\f03b" </li> <li>  fa-indent "\f03c" </li> <li>  fa-video-camera "\f03d" </li> <li>  fa-picture-o "\f03e" </li> <li>  fa-pencil "\f040" </li> <li>  fa-map-marker "\f041" </li> <li>  fa-adjust "\f042" </li> <li>  fa-tint "\f043" </li> <li>  fa-pencil-square-o "\f044" </li> <li>  fa-share-square-o "\f045" </li> <li>  fa-check-square-o "\f046" </li> <li>  fa-arrows "\f047" </li> <li>  fa-step-backward "\f048" </li> <li>  fa-fast-backward "\f049" </li> <li>  fa-backward "\f04a" </li> <li>  fa-play "\f04b" </li> <li>  fa-pause "\f04c" </li> <li>  fa-stop "\f04d" </li> <li>  fa-forward "\f04e" </li> <li>  fa-fast-forward "\f050" </li> <li>  fa-step-forward "\f051" </li> <li>  fa-eject "\f052" </li> <li>  fa-chevron-left "\f053" </li> <li>  fa-chevron-right "\f054" </li> <li>  fa-plus-circle "\f055" </li> <li>  fa-minus-circle "\f056" </li> <li>  fa-times-circle "\f057" </li> <li>  fa-check-circle "\f058" </li> <li>  fa-question-circle "\f059" </li> <li>  fa-info-circle "\f05a" </li> <li>  fa-crosshairs "\f05b" </li> <li>  fa-times-circle-o "\f05c" </li> <li>  fa-check-circle-o "\f05d" </li> <li>  fa-ban "\f05e" </li> <li>  fa-arrow-left "\f060" </li> <li>  fa-arrow-right "\f061" </li> <li>  fa-arrow-up "\f062" </li> <li>  fa-arrow-down "\f063" </li> <li>  fa-share "\f064" </li> <li>  fa-expand "\f065" </li> <li>  fa-compress "\f066" </li> <li>  fa-plus "\f067" </li> <li>  fa-minus "\f068" </li> <li>  fa-asterisk "\f069" </li> <li>  fa-exclamation-circle "\f06a" </li> <li>  fa-gift "\f06b" </li> <li>  fa-leaf "\f06c" </li> <li>  fa-fire "\f06d" </li> <li>  fa-eye "\f06e" </li> <li>  fa-eye-slash "\f070" </li> <li>  fa-exclamation-triangle "\f071" </li> <li>  fa-plane "\f072" </li> <li>  fa-calendar "\f073" </li> <li>  fa-random "\f074" </li> <li>  fa-comment "\f075" </li> <li>  fa-magnet "\f076" </li> <li>  fa-chevron-up "\f077" </li> <li>  fa-chevron-down "\f078" </li> <li>  fa-retweet "\f079" </li> <li>  fa-shopping-cart "\f07a" </li> <li>  fa-folder "\f07b" </li> <li>  fa-folder-open "\f07c" </li> <li>  fa-arrows-v "\f07d" </li> <li>  fa-arrows-h "\f07e" </li> <li>  fa-bar-chart-o "\f080" </li> <li>  fa-twitter-square "\f081" </li> <li>  fa-facebook-square "\f082" </li> <li>  fa-camera-retro "\f083" </li> <li>  fa-key "\f084" </li> <li>  fa-cogs "\f085" </li> <li>  fa-comments "\f086" </li> <li>  fa-thumbs-o-up "\f087" </li> <li>  fa-thumbs-o-down "\f088" </li> <li>  fa-star-half "\f089" </li> <li>  fa-heart-o "\f08a" </li> <li>  fa-sign-out "\f08b" </li> <li>  fa-linkedin-square "\f08c" </li> <li>  fa-thumb-tack "\f08d" </li> <li>  fa-external-link "\f08e" </li> <li>  fa-sign-in "\f090" </li> <li>  fa-trophy "\f091" </li> <li>  fa-github-square "\f092" </li> <li>  fa-upload "\f093" </li> <li>  fa-lemon-o "\f094" </li> <li>  fa-phone "\f095" </li> <li>  fa-square-o "\f096" </li> <li>  fa-bookmark-o "\f097" </li> <li>  fa-phone-square "\f098" </li> <li>  fa-twitter "\f099" </li> <li>  fa-facebook "\f09a" </li> <li>  fa-github "\f09b" </li> <li>  fa-unlock "\f09c" </li> <li>  fa-credit-card "\f09d" </li> <li>  fa-rss "\f09e" </li> <li>  fa-hdd-o "\f0a0" </li> <li>  fa-bullhorn "\f0a1" </li> <li>  fa-bell "\f0f3" </li> <li>  fa-certificate "\f0a3" </li> <li>  fa-hand-o-right "\f0a4" </li> <li>  fa-hand-o-left "\f0a5" </li> <li>  fa-hand-o-up "\f0a6" </li> <li>  fa-hand-o-down "\f0a7" </li> <li>  fa-arrow-circle-left "\f0a8" </li> <li>  fa-arrow-circle-right "\f0a9" </li> <li>  fa-arrow-circle-up "\f0aa" </li> <li>  fa-arrow-circle-down "\f0ab" </li> <li>  fa-globe "\f0ac" </li> <li>  fa-wrench "\f0ad" </li> <li>  fa-tasks "\f0ae" </li> <li>  fa-filter "\f0b0" </li> <li>  fa-briefcase "\f0b1" </li> <li>  fa-arrows-alt "\f0b2" </li> <li>  fa-users "\f0c0" </li> <li>  fa-link "\f0c1" </li> <li>  fa-cloud "\f0c2" </li> <li>  fa-flask "\f0c3" </li> <li>  fa-scissors "\f0c4" </li> <li>  fa-files-o "\f0c5" </li> <li>  fa-paperclip "\f0c6" </li> <li>  fa-floppy-o "\f0c7" </li> <li>  fa-square "\f0c8" </li> <li>  fa-bars "\f0c9" </li> <li>  fa-list-ul "\f0ca" </li> <li>  fa-list-ol "\f0cb" </li> <li>  fa-strikethrough "\f0cc" </li> <li>  fa-underline "\f0cd" </li> <li>  fa-table "\f0ce" </li> <li>  fa-magic "\f0d0" </li> <li>  fa-truck "\f0d1" </li> <li>  fa-pinterest "\f0d2" </li> <li>  fa-pinterest-square "\f0d3" </li> <li>  fa-google-plus-square "\f0d4" </li> <li>  fa-google-plus "\f0d5" </li> <li>  fa-money "\f0d6" </li> <li>  fa-caret-down "\f0d7" </li> <li>  fa-caret-up "\f0d8" </li> <li>  fa-caret-left "\f0d9" </li> <li>  fa-caret-right "\f0da" </li> <li>  fa-columns "\f0db" </li> <li>  fa-sort "\f0dc" </li> <li>  fa-sort-asc "\f0dd" </li> <li>  fa-sort-desc "\f0de" </li> <li>  fa-envelope "\f0e0" </li> <li>  fa-linkedin "\f0e1" </li> <li>  fa-undo "\f0e2" </li> <li>  fa-gavel "\f0e3" </li> <li>  fa-tachometer "\f0e4" </li> <li>  fa-comment-o "\f0e5" </li> <li>  fa-comments-o "\f0e6" </li> <li>  fa-bolt "\f0e7" </li> <li>  fa-sitemap "\f0e8" </li> <li>  fa-umbrella "\f0e9" </li> <li>  fa-clipboard "\f0ea" </li> <li>  fa-lightbulb-o "\f0eb" </li> <li>  fa-exchange "\f0ec" </li> <li>  fa-cloud-download "\f0ed" </li> <li>  fa-cloud-upload "\f0ee" </li> <li>  fa-user-md "\f0f0" </li> <li>  fa-stethoscope "\f0f1" </li> <li>  fa-suitcase "\f0f2" </li> <li>  fa-bell-o "\f0a2" </li> <li>  fa-coffee "\f0f4" </li> <li>  fa-cutlery "\f0f5" </li> <li>  fa-file-text-o "\f0f6" </li> <li>  fa-building-o "\f0f7" </li> <li>  fa-hospital-o "\f0f8" </li> <li>  fa-ambulance "\f0f9" </li> <li>  fa-medkit "\f0fa" </li> <li>  fa-fighter-jet "\f0fb" </li> <li>  fa-beer "\f0fc" </li> <li>  fa-h-square "\f0fd" </li> <li>  fa-plus-square "\f0fe" </li> <li>  fa-angle-double-left "\f100" </li> <li>  fa-angle-double-right "\f101" </li> <li>  fa-angle-double-up "\f102" </li> <li>  fa-angle-double-down "\f103" </li> <li>  fa-angle-left "\f104" </li> <li>  fa-angle-right "\f105" </li> <li>  fa-angle-up "\f106" </li> <li>  fa-angle-down "\f107" </li> <li>  fa-desktop "\f108" </li> <li>  fa-laptop "\f109" </li> <li>  fa-tablet "\f10a" </li> <li>  fa-mobile "\f10b" </li> <li>  fa-circle-o "\f10c" </li> <li>  fa-quote-left "\f10d" </li> <li>  fa-quote-right "\f10e" </li> <li>  fa-spinner "\f110" </li> <li>  fa-circle "\f111" </li> <li>  fa-reply "\f112" </li> <li>  fa-github-alt "\f113" </li> <li>  fa-folder-o "\f114" </li> <li>  fa-folder-open-o "\f115" </li> <li>  fa-smile-o "\f118" </li> <li>  fa-frown-o "\f119" </li> <li>  fa-meh-o "\f11a" </li> <li>  fa-gamepad "\f11b" </li> <li>  fa-keyboard-o "\f11c" </li> <li>  fa-flag-o "\f11d" </li> <li>  fa-flag-checkered "\f11e" </li> <li>  fa-terminal "\f120" </li> <li>  fa-code "\f121" </li> <li>  fa-reply-all "\f122" </li> <li>  fa-mail-reply-all "\f122" </li> <li>  fa-star-half-o "\f123" </li> <li>  fa-location-arrow "\f124" </li> <li>  fa-crop "\f125" </li> <li>  fa-code-fork "\f126" </li> <li>  fa-chain-broken "\f127" </li> <li>  fa-question "\f128" </li> <li>  fa-info "\f129" </li> <li>  fa-exclamation "\f12a" </li> <li>  fa-superscript "\f12b" </li> <li>  fa-subscript "\f12c" </li> <li>  fa-eraser "\f12d" </li> <li>  fa-puzzle-piece "\f12e" </li> <li>  fa-microphone "\f130" </li> <li>  fa-microphone-slash "\f131" </li> <li>  fa-shield "\f132" </li> <li>  fa-calendar-o "\f133" </li> <li>  fa-fire-extinguisher "\f134" </li> <li>  fa-rocket "\f135" </li> <li>  fa-maxcdn "\f136" </li> <li>  fa-chevron-circle-left "\f137" </li> <li>  fa-chevron-circle-right "\f138" </li> <li>  fa-chevron-circle-up "\f139" </li> <li>  fa-chevron-circle-down "\f13a" </li> <li>  fa-html5 "\f13b" </li> <li>  fa-css3 "\f13c" </li> <li>  fa-anchor "\f13d" </li> <li>  fa-unlock-alt "\f13e" </li> <li>  fa-bullseye "\f140" </li> <li>  fa-ellipsis-h "\f141" </li> <li>  fa-ellipsis-v "\f142" </li> <li>  fa-rss-square "\f143" </li> <li>  fa-play-circle "\f144" </li> <li>  fa-ticket "\f145" </li> <li>  fa-minus-square "\f146" </li> <li>  fa-minus-square-o "\f147" </li> <li>  fa-level-up "\f148" </li> <li>  fa-level-down "\f149" </li> <li>  fa-check-square "\f14a" </li> <li>  fa-pencil-square "\f14b" </li> <li>  fa-external-link-square "\f14c" </li> <li>  fa-share-square "\f14d" </li> <li>  fa-compass "\f14e" </li> <li>  fa-caret-square-o-down "\f150" </li> <li>  fa-caret-square-o-up "\f151" </li> <li>  fa-caret-square-o-right "\f152" </li> <li>  fa-eur "\f153" </li> <li>  fa-gbp "\f154" </li> <li>  fa-usd "\f155" </li> <li>  fa-inr "\f156" </li> <li>  fa-jpy "\f157" </li> <li>  fa-rub "\f158" </li> <li>  fa-krw "\f159" </li> <li>  fa-btc "\f15a" </li> <li>  fa-file "\f15b" </li> <li>  fa-file-text "\f15c" </li> <li>  fa-sort-alpha-asc "\f15d" </li> <li>  fa-sort-alpha-desc "\f15e" </li> <li>  fa-sort-amount-asc "\f160" </li> <li>  fa-sort-amount-desc "\f161" </li> <li>  fa-sort-numeric-asc "\f162" </li> <li>  fa-sort-numeric-desc "\f163" </li> <li>  fa-thumbs-up "\f164" </li> <li>  fa-thumbs-down "\f165" </li> <li>  fa-youtube-square "\f166" </li> <li>  fa-youtube "\f167" </li> <li>  fa-xing "\f168" </li> <li>  fa-xing-square "\f169" </li> <li>  fa-youtube-play "\f16a" </li> <li>  fa-dropbox "\f16b" </li> <li>  fa-stack-overflow "\f16c" </li> <li>  fa-instagram "\f16d" </li> <li>  fa-flickr "\f16e" </li> <li>  fa-adn "\f170" </li> <li>  fa-bitbucket "\f171" </li> <li>  fa-bitbucket-square "\f172" </li> <li>  fa-tumblr "\f173" </li> <li>  fa-tumblr-square "\f174" </li> <li>  fa-long-arrow-down "\f175" </li> <li>  fa-long-arrow-up "\f176" </li> <li>  fa-long-arrow-left "\f177" </li> <li>  fa-long-arrow-right "\f178" </li> <li>  fa-apple "\f179" </li> <li>  fa-windows "\f17a" </li> <li>  fa-android "\f17b" </li> <li>  fa-linux "\f17c" </li> <li>  fa-dribbble "\f17d" </li> <li>  fa-skype "\f17e" </li> <li>  fa-foursquare "\f180" </li> <li>  fa-trello "\f181" </li> <li>  fa-female "\f182" </li> <li>  fa-male "\f183" </li> <li>  fa-gittip "\f184" </li> <li>  fa-sun-o "\f185" </li> <li>  fa-moon-o "\f186" </li> <li>  fa-archive "\f187" </li> <li>  fa-bug "\f188" </li> <li>  fa-vk "\f189" </li> <li>  fa-weibo "\f18a" </li> <li>  fa-renren "\f18b" </li> <li>  fa-pagelines "\f18c" </li> <li>  fa-stack-exchange "\f18d" </li> <li>  fa-arrow-circle-o-right "\f18e" </li> <li>  fa-arrow-circle-o-left "\f190" </li> <li>  fa-caret-square-o-left "\f191" </li> <li>  fa-dot-circle-o "\f192" </li> <li>  fa-wheelchair "\f193" </li> <li>  fa-vimeo-square "\f194" </li> <li>  fa-try "\f195" </li> <li>  fa-plus-square-o "\f196" </li></ul> <div style='clear:both'></div>Demikian mengenai List Icon Font Awesome dan CSS Value Content V4.0.3 selanjutnya silahkan bereksperimen seperti yang sedang ngetrend saat ini. Sweet greetings and congratulations from <a href="http://mas-andes.blogspot.com" title="http://mas-andes.blogspot.com">http://mas-andes.blogspot.com</a> welcome coming new year 2014. <style type='text/css' scoped='scoped'>.clear{clear:both} ul{list-style:none} .kiri li{width:40%;float:left;padding:5px 20px} .css-value{float:right} </style>

List Icon Font Awesome dan CSS Value Content V4.0.3 sedikit mau berbagi setelah lama tidak menjama…