Cara Menggunakan Font Awesome di Blogger

Font Awesome adalah framework CSS yang berfungsi untuk membuat ikon atau simbol. Berikut ini
Cara Memasang dan Menggunakan Font Awesome Untuk Membuat Ikon di Blogger.

Font Awesome sangat membantu banyak desainer template dan web developer untuk membuat atau menambahkan ikon gambar dalam desainnya. 

Font Awesome bebas digunakan oleh siapa pun. Ia kompatibel di banyak jenis browser. Penggunaannya pun mudah, ringan, dan tidak memberatkan loading blog.

Cara Menggunakan Font Awesome di Blogger

Cara Memasang Font Awesome

1. Tema > Edit HTML
2. Simpan link ke font awesome berikut ini di atas kode </head>.

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

3. Save!

Cara Menggunakan Font Awesome di Blogger

Untuk mengetahui semua list dan daftar lengkapnya, buka https://fontawesome.com/icons

Untuk memasang ikon Font Awesome melalui HTML adalah dengan menuliskan sepeti kode berikut ini:

<i class='fa fa-home'/>

Kode di atas bisa digunakan untuk menambahkan icon pada menu Home. Penerapannya adalah sebagai berikut:

 <li class='active'><a href='/'><i class='fa fa-home'/> Home</a></li>
 <li><a href='/p/about.html'><i class='fa fa-user'/> About</a></li>

Maka akan muncul icon home (rumah) di depan menu Home dan icon user di depan menu About, seperti di navigasi menu blog ini.

Cara lainnya adalah dengan menggunakan kode CSS. Caranya dengan menambahkan kode :before dan :after  pada elemen yang akan dipasangi font awesome.

Misalnya:

.sidebar h2:before {content: "\f109"; font-family: "fontawesome"; font-weight: 900; font-size: 20px; display: inline-block; margin-right: 3px}

Demikian Cara Menggunakan Font Awesome di Blogger. Bingung? :)

Post a Comment

2 Comments

  1. Tapi bikin berat loadingnya ga kalau pakai Font Awesome?

    ReplyDelete