Welcome to MySide

Pengertian Font Awesome dan Cara Menggunakannya di Blogger

Pengertian Font Awesome dan Cara Menggunakannya di Blogger
Pengertian Font Awesome dan Cara Menggunakannya di Blogger

FONT Awesome adalah huruf dan/atau angka yang membentuk gambar dalam desain blogger atau website. Itu pengertian font awesome secara praktis.

Secara harfiyah, font awesome artinya 'huruf yang mengagumkan'.

Menurut Wikipedia, Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with the Twitter Bootstrap, and later was incorporated into the Bootstrap CDN. Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it on a second place after Google Fonts.

Font Awesome adalah font ikonik. Icon-icon yang digunakan berbasis gambar vector yang bisa diatur ukurannya sesuai ukuran font. 

Trend desain widget blogger masa kini banyak menggunakan font awesome ini. Misalnya, Icon Media Sosial di Sidebar atau Tombol Social Share.

Navigasi Menu juga bisa dipercantik dengan menggunakan font awesome, seperti Menu Desain Blog di atas yang ada gambar tangnya.

Lihat Daftar Font Awesome:

Cara Menggunakan Font Awesome

Sudah sangat banyak blogger yang berbagi cara menggunakan Fony Awesome. Silakan buka Google dan ketik saja cara menggunakan font awesome, maka akan banyak pake banget posting tentang hal itu.

Yang jelas, salah satu langkahnya, untuk menggunakan "huruf mengagumkan" ini, adalah dengan memasang link CSS Font Awesome yang umumnya seperti ini:

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

Pasang kode tersebut di bawah <head> atau di atas </head>

Kalau CB biasa memasangnya dengan cara yang fast loading: Cara Pasang Google Font & Awesome Fast Loading.

Contoh paling umum penggunaan font awesome adalah untuk mengganti link HOME menjadi ikon gambar rumah, seperti ini:

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

Hasilnya:


Cara Lain Menggunakan Font Awesome
Cara menggunakan font awesome dengan kode <i class='font awesome'/> di atas untuk per elemen atau manual.

Jika ingin otomatis, misalnya untuk mempercantik judul widget di sidebar (h2), maka penggunaanya di kode css seperti di bawah ini. Yang digunakannya kode huruf dan angka, bukan kode nama font seperti di atas.

.sidebar h2:before {
    content: "\f02e"; 
    font-family: FontAwesome;
    text-decoration: inherit;
    padding-right: 0.5em;
    color:#616161;
    left: 0;
}

Lihat DEMO

Demikian ulasan ringkas tentang pengertian Font Awesome dan Cara Menggunakannya. Good Lukc & Happy Blogging! (http://www.contohblog.com).*

Video Cara Install dan Memasang Font Awesome



Subscribe to receive free email updates: