Font Cantik Dari Font Awesome

Sebuah font yang bisa dijadikan ikon pada sebuah weblog, karena bentuknya yang bisa dibilang sama dengan ikon sebagai pengganti ikon-ikon gambar

Font Cantik Dari Font Awesome

Font Cantik Dari Font Awesome - Tidak sedikit blog atau website menggunakan ikon berupa gambar, karena dengan banyaknya pilihan gambar yang akan ditampilkan sebagai ikon dan kustomisasi gambar untuk ikon bisa kita lakukan sendiri (tergantung kita mudah atau tidaknya kita modifikasi atau membuat suatu gambar untuk ikon)

Penggunaan gambar sebagai ikon memang sebagai suatu pilihan tapi kita juga harus memperhatikan kecepatan loading suatu weblog, karena dengan banyaknya ikon gambar yang ditampilkan tentu saja akan menambah beban loading weblog.

Ikon Font Awesome

Sebagai alternatif lain selain menggunakan gambar sebagai ikon, kita bisa menggunakan font ikonik dari Font Awesome, selain banyak pilihan ikon yang bisa kita pergunakan, menggunakannya pun tidak begitu sulit dan ikon tersebut merupakan karakter font maka kita bisa modifikasi dan kustomisasi menggunakan CSS.

Menampilkan Font Awesome

Letakan sccript dibawah ini diantara tag <head>

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

dan Save template

Menggunakan Font Awesome

Ikon cantik dari Awesome ini kita bisa tempatkan dimana saja kita inginkan, untuk menampilkan font awesome ini menggunakan tag <i> karena sifatnya inline-block dan menambahkan class utama yaitu .fa dan class untuk memanggil ikon tertentu.

Sebagai contoh saya akan menampilkan ikon bus dari font awesome

<i class="fa fa-bus"></i>

Dan hasilnya:

fa-bus

Untuk melihat contoh bentuk ikon-ikon lainnya bisa masuk pada http://fontawesome.io/icons

Merubah Ukuran Ikon

Ukuran ikon bisa kita ganti dengan menambahkan class fa-lg (berubah sebesar 33%), fa-2x, fa-3x, fa-4x, atau fa-5x. Contoh penggunaanya sebagai berikut:

<i class="fa fa-bus fa-lg"></i> fa-lg
<i class="fa fa-bus fa-2x"></i> fa-2x
<i class="fa fa-bus fa-3x"></i> fa-3x
<i class="fa fa-bus fa-4x"></i> fa-4x
<i class="fa fa-bus fa-5x"></i> fa-5x

Dan hasilnya:

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Selain class yang sudah ditentukan diatas, kita bisa menambahkan css untuk mengganti warna, background atau menambah border pada ikon font awesome tersebut.

Sebagai contoh seperti ini:

.fa-bus {
   color: blue;
   background-color: Black;
   height: 80px;
   width: 80px;
   padding: 10px;
   text-align: center;
   border-radius: 100%;
   border: 4px solid blue;
}

Dan hasilnya:



Menampilkan Ikon Font Awesome menggunakan CSS Content

Pseudo class before ataupun after yang dapat kita gunakan pada template blog, yang bisa kita gunakan untuk menempatkan ikon font awesome pada bagian-bagian tertentu pada bagian blog, contoh css-nya sebagai berikut:

.sidebar h2:before {
  content: "\f207";
  font-family: FontAwesome;
  display: inline-block;
  color: red;
  line-height: 1em;
}

Untuk listnya kalian bisa melihat pada http://fontawesome.io/cheatsheet.

Penggunaan ikon \f207 berasal dari [&#xf207;], atau selain menggunakan font awesome sebagai pilihan lain bisa menggunakan ikon unicode karakter sebagai ikon pada pseudo elemen.

Semoga bermanfaat.

No comments:

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin