Cara Menggunakan Font Awesome Icons di Navigasi Menu Blog

Romeltea | Follow @romel_tea

Font Awesome Icons
Cara Menggunakan Font Awesome Icons di Navigasi Menu Blog. Membuat Menu Navigasi dengan Font Awesome.

AWESOME
Font atau Font Awesome adalah huruf  yang mengesankan atau jenis huruf yang ditunggu-tunggu. Itu pengertian harfiyahnya.

Font = huruf. Awesome = ks. mengagumkan, membuat terpesona. It was an a. sight to behold Pemandangan itu benar-benar mengagumkan.

Pengertian secara istilah, Font Awesome adalah jenis huruf yang membentuk atau menampilkan icon gambar. Karena sangat membantu, ringan, fast loading, maka jenis huruf ini menjadi dambaan setiap web designer maupun developer. Maka, disebutlah atau dinamailah huruf ini sebagai Awesome Font.

Cara Menggunakan Font Awesome

Ada dua tahap untuk menggunakan icon Font Awesome di blog
  1. Menambahkan Link Font-Awesome.
  2. Memasang Kode Font Awesome
Tambahkan kode berikut ini di atas kode </head>

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

Untuk menggunakannya di navigasi menu, maka  untuk memunculkan Font Awesome ini adalah dengan menggunakan tag <i> dan menambahkan class utama (fa) dan class untuk memanggil ikon tertentu, seperti ini:

<i class='fa fa-home'>&nbsp; Home</i>

Kode &nbsp; adalah kode untuk mengatur jarak antara ikon dengan teks.

Daftar gambar dan kode Font Awesome sebagai rujukan bisa dilihat di Font Awesome Cheatsheet atau yang lebih besar di Bootstrap.*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

3 comments on Cara Menggunakan Font Awesome Icons di Navigasi Menu Blog

  1. thx gan bermanfaat...

    ReplyDelete
  2. Akhirnya setelah keliling dan nyoba beberapa tutorial. Yang ini benar2 bekerja, thanks juragan.

    ReplyDelete
  3. Thanks, menarik sekali

    ReplyDelete

No Spam, Please!