Pengertian Font Awesome, Cara Pasang & Menggunakannya

Tutorial: Tips & Trik Membuat dan Memasang Font Awesome di Template Blogger/Blogspot (Blogger Theme)

Salah satu upaya guna mempercantik tampilan situs web yaitu dengan cara menggunakan kode JavaScript (Js) khusus yang dinamakan Font Awesome.

Font Awesome adalah kerja sama antara Bootstrap, CDN, dan CSS; untuk menampilkan huruf, angka, maupun simbol yang berbentuk gambar (icon) tanpa takut ikon tersebut akan pecah atau buram.

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.

Pertama kali dicetuskan pada tanggal 21 Agustus 2012; pada bulan Januari 2018 yang lalu Font Awesome melakukan Pelepasan Stabil.

Kami sendiri kurang tahu pasti apa dan bagaimana maksudnya, akan tetapi tampilan situs Font Awesome tampak berubah; dan alamat situs (URL) pun juga ikut berubah, dari yang beralamatkan https://fontawesome.io/ kini berubah menjadi https://fontawesome.com/.

Cara Membuat & Memasang JavaScript Font Awesome di Blogger

Apabila kamu tertarik ingin menampilkan logo-logo Font Awesome di tampilan blog, maka simpan kode di bawah ini:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

...di atas kode </head> kemudian simpan template blog.

Selain itu, kamu juga boleh kok mengimplementasikan sebagaimana tutorial di bawah 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=Oswald");loadCSS("https://fonts.googleapis.com/css?family=Roboto");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
//]]>
</script>

Pada kode No. 2 di atas, ada Google Fonts untuk Oswald dan Roboto yang disandingkan (digabungkan) dengan kode JavaScript (Js) Font Awesome milik kamu.

Pilih salah satu kode penerapan di atas ya. Jangan di gabung-gabung :)

Cara Menampilkan Font Awesome Blogger di Tampilan Blog

Sesaat setelah memasang kode Font Awesome (Js) di template blogger, maka bagaimana cara menampilkannya di tampilan blog kamu?

Silakan masuk ke situs web ini: Font Awesome Icons, maka kamu akan melihat berbagai daftar ikon-ikon yang bisa digunakan saat itu juga.

Prakteknya seperti ini, apabila ingin dipasangkan di bagian Navigasi Menu, kira-kira cara memasangnya seperti ini:

<li><i class='fa fa-home'/> HOME</a></li>

...atau seperti ini:

<li class=''><a class='fa fa-list' href='#' itemprop='url'><span itemprop='name'> NEW LABEL </span></a>
 <ul>
   <li class=''><a href='/search/label/LABEL' itemprop='url'><span itemprop='name'> SUB-LABEL </span></a></li>
   <li class=''><a href='/search/label/LABEL' itemprop='url'><span itemprop='name'> SUB-LABEL </span></a></li>
   <li class=''><a href='/search/label/LABEL' itemprop='url'><span itemprop='name'> SUB-LABEL </span></a></li>
   <li class=''><a href='/search/label/LABEL' itemprop='url'><span itemprop='name'> SUB-LABEL </span></a></li>
   <li class=''><a href='/search/label/LABEL' itemprop='url'><span itemprop='name'> SUB-LABEL </span></a></li>
   <li class=''><a href='/search/label/LABEL' itemprop='url'><span itemprop='name'> SUB-LABEL </span></a></li>
 </ul>
</li>

Kalau ingin memasang ikon Font Awesome di Sidebar-Wrapper atau di bagian judul/nama widget samping blog, coba tambahkan kode CSS di bawah ini:

#sidebar h2:before {
     background: #fdfdfd;
     content: '\f1d9';
     font-family: fontawesome;
     position: absolute;
     left: 0;
     top: 0;
     display: inline-block;
     padding: 13px 18px;
     border-right: 1px solid rgba(0,0,0,0.12);
     line-height: normal;
}

...tepat di deretan kode CSS yang ada di template blogger yang kamu gunakan, selanjutnya SAVE dan Cek hasilnya.

Bagaimana? Cukup mudah, kan? Itulah pengertian Font Awesome, cara membuat dan memasang serta cara menggunakan Font Awesome di template blogger.

Labels: Tutorial Blogger

Thanks for reading Pengertian Font Awesome, Cara Pasang & Menggunakannya. Please share this article.

Share this post