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 memakai arahan JavaScript (Js) khusus yang dinamakan Font Awesome.

Font Awesome ialah kolaborasi 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 kemudian Font Awesome melaksanakan Pelepasan Stabil.

Kami sendiri kurang tahu niscaya 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/ sekarang bermetamorfosis https://fontawesome.com/.

Cara Membuat & Memasang JavaScript Font Awesome di Blogger

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

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

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

Selain itu, kau juga boleh kok mengimplementasikan sebagaimana tutorial di bawah ini:

<script type='text/j4vascript'> //<![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 arahan No. 2 di atas, ada Google Fonts untuk Oswald dan Roboto yang disandingkan (digabungkan) dengan arahan JavaScript (Js) Font Awesome milik kamu.

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

Cara Menampilkan Font Awesome Blogger di Tampilan Blog

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

Silakan masuk ke situs web ini: Font Awesome Icons, maka kau akan melihat banyak sekali daftar ikon-ikon yang dapat dipakai ketika itu juga.

Prakteknya ibarat ini, apabila ingin dipasangkan di bab Navigasi Menu, kira-kira cara memasangnya ibarat ini:

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

...atau ibarat 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 bab judul/nama widget samping blog, coba tambahkan arahan 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 formasi arahan CSS yang ada di template blogger yang kau gunakan, selanjutnya SAVE dan Cek hasilnya.

Bagaimana? Cukup mudah, kan? Itulah pengertian Font Awesome, cara menciptakan dan memasang serta cara memakai Font Awesome di template blogger.
Sumber http://addbloggerthemes.blogspot.com

Share this post