Cara Memasang Font Awesome di Blogger

Font awesome berguna mengurangi penggunaan icon dalam bentuk gambar pada tampilan situs. Anda tidak perlu lagi repot-repot dan susah mencari atau mendesain icon gambar untuk kebutuhan tampilan tertentu di situs. Apa itu font awesome? Font awesome adalah font web yang berbentuk icon siap pakai untuk antarmuka web menggunakan pemanggil CSS, umumnya digunakan untuk Twitter Bootstrap. Ada ratusan lebih icon di Font awesome dan akan bertambah tiap rilisnya.


Pertama silahkan pasang CSS font awesome di atas tag </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>


Setelah Anda menambahkan CSS di atas kini saatnya kita coba menerapkan font awesome tersebut. Misalnya kita akan menggunakan font awesome pada menu.

<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
<li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
<li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
</ul>

hasilnya akan tampak seperti berikut.
Font awesome ini juga memiliki efek CSS yang mudah untuk di panggil, lihat contoh berikut.



<i class="fa fa-spinner"></i>
<i class="fa fa-refresh"></i>
<i class="fa fa-cog"></i>

Icon di atas biasa saja, tidak memiliki efek apapun. Akan menjadi lebih menarik bila kita tambahkan efek, misalnya efek fa-spin yaitu efek berputar. Contoh, kita akan menerapkan efek fa-spin untuk icon ini:  fa-spinner, fa-refresh dan fa-cog. Penulisannya sebagai berikut.

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Hasilnya.

Tidak hanya itu, Anda dapat memperbesar dan memperkecil icon.


<p><i class="fa fa-thumbs-up fa-lg"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-2x"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-3x"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-4x"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-5x"></i> fa-thumbs-up</p>

dan hasilnya akan menjadi seperti berikut.

fa-thumbs-up
fa-thumbs-up pembesaran 2x
fa-thumbs-up pembesaran 3x
fa-thumbs-up pembesaran 4x
fa-thumbs-up pembesaran 5x

Selamat belajar :)
Daftar lengkap icon dapat Anda lihat di http://fortawesome.github.io/Font-Awesome/icons/

Komentar

  1. kenapa punya saya ketika ditmbahkan pada widget, judulnya ke bawah ya bukan kesamping ?

    BalasHapus
    Balasan
    1. nih, di coba-redesign.blogspot.com yang artikel populer, om :D

      Hapus
    2. Udah bener koq, tinggal mengatur jaraknya aja (padding).
      Coba gunakan CSS berikut.
      .sidebar h3:before {
      content: "/f0ed";
      font-family: fontAwesome;
      font-size: 22px;
      font-style: normal;
      color: #F9F9F9;
      top: 0px;
      left: 0px;
      padding: 5px 15px 0px 0px;
      position: absolute;
      }

      Hapus
    3. owh, gitu makasih ya om.
      maaf, ane banyak tanya, :D

      lagi belajar koding soalnya, :D

      Hapus
  2. post mantap gan.. simpan dulu buat uji coba kapan-kapan.. hehehe oya gan buat blockquote kaya punya agan tu gmn y.? maaf kalau keluar dari topik.. salam blogging

    BalasHapus
  3. mantab gan ijin paraktekin di blog
    http://logika999.blogspot.co.id/

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template