Cara Memasang Font Awesome di Web Blog
Font Awesome merupakan kerja sama antara URL Font Awesome BootstrapCDN dengan CSS untuk menampilkan simbol berbentuk gambar (icon) tanpa takut ikon tersebut pecah atau buram pada tampilan web blog.
Menurut sejarahnya, Font Awesome pertama kali dibuat pada tanggal 21 agustus 2012, dan januari 2018 lalu melakukan pelepasan stabil.
Dulunya, domain web Font Awesome beralamatkan https://fontawesome.io, kini berubah menjadi https://fontawesome.com.
Coba cek gambar di bawah, ada timbangan, kan?
Mau seperti itu? Berikut caranya!
1. Salin (copy) BootstrapCDN di bawah ini, tempelkan (paste) di atas kode </head>
Bisa juga dengan menggabungkannya dengan Google Fonts seperti ini:
Script gabungan di atas, disaranakan ditempatkan di atas kode </body> karena ukurannya yang berat.
2. Selanjutnya adalah bagaimana cara kita memasang atau menambahkan ikon di navigasi menu yang diinginkan, caranya seperti berikut:
Yang perlu dilakukan, sisipkan tag <i class='fa fa-balance-scale'/> sesudah nama kategori dan sebelum tag </li> pada navigasi menu di atas.
Kalau ingin mengganti ikon timbangan di atas, ganti fa fa-balance-scale di atas dengan nama ikon lain. Kawan-kawan bisa mencari dan mendapatkan di sini: Font Awesome V 4.7.
Beberapa contoh penerapannya:
Kalau nama kategori dan ikon Font Awesome terlalu dekat, tambahkan spasi di nama menu sebelah kanan (lihat nama menu teknologi dan motor di atas -- ada spasi).
Pokoknya ada 3 langkah sebagaimana yang tertulis di atas. Yang pertama, script di atas ditempatkan di atas kode </head> atau digabungkan dengan script Google Fonts. Selanjutnya, tambahkan atribut <i class> dan jangan lupa memasangkan kode ikon yang diberikan.
Menurut sejarahnya, Font Awesome pertama kali dibuat pada tanggal 21 agustus 2012, dan januari 2018 lalu melakukan pelepasan stabil.
Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Twitter Bootstrap, and later was incorporated into the BootstrapCDN. Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it second place after Google Fonts. - Wikipedia.
Dulunya, domain web Font Awesome beralamatkan https://fontawesome.io, kini berubah menjadi https://fontawesome.com.
Cara Memasang Font Awesome di Web Blog
Coba cek gambar di bawah, ada timbangan, kan?
1. Salin (copy) BootstrapCDN di bawah ini, tempelkan (paste) di atas kode </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />Bisa juga dengan menggabungkannya dengan Google Fonts seperti ini:
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
//]]>
</script>Script gabungan di atas, disaranakan ditempatkan di atas kode </body> karena ukurannya yang berat.
2. Selanjutnya adalah bagaimana cara kita memasang atau menambahkan ikon di navigasi menu yang diinginkan, caranya seperti berikut:
<li><a href='/search/label/Bisnis' title='Cara Berbisnis'>BISNIS<i class='fa fa-balance-scale'/></a></li>Yang perlu dilakukan, sisipkan tag <i class='fa fa-balance-scale'/> sesudah nama kategori dan sebelum tag </li> pada navigasi menu di atas.
Kalau ingin mengganti ikon timbangan di atas, ganti fa fa-balance-scale di atas dengan nama ikon lain. Kawan-kawan bisa mencari dan mendapatkan di sini: Font Awesome V 4.7.
Beberapa contoh penerapannya:
<li><a href='/search/label/Teknologi' title='Teknologi'>Teknologi <i class='fa fa-bolt'/></a></li>
<li><a href='/search/label/Motor' title='Motor'>Motor <i class='fa fa-bicycle'/></a></li>Kalau nama kategori dan ikon Font Awesome terlalu dekat, tambahkan spasi di nama menu sebelah kanan (lihat nama menu teknologi dan motor di atas -- ada spasi).
Pokoknya ada 3 langkah sebagaimana yang tertulis di atas. Yang pertama, script di atas ditempatkan di atas kode </head> atau digabungkan dengan script Google Fonts. Selanjutnya, tambahkan atribut <i class> dan jangan lupa memasangkan kode ikon yang diberikan.
Posting Komentar untuk "Cara Memasang Font Awesome di Web Blog"
Silakan berkomentar menggunakan akun Google, Anonim atau Nama (URL). No Spam, Please... Komentar spam tidak akan dipublikasikan 😊