Cara Memasang Icon Font Awesome di Blog

Cara Lengkap dan Mudah Memasang Icon Font Awesome di Blog - Masih banyak yang belum mengerti bagaimana cara memasang icon font awesome di blog karena memang tutorialnya agak sulit dan tidak terlalu di perjelas apalagi bagi pemula mungkin agak susah.

Fungsi dari icon font awesome ini hanyalah sebagai aksesoris atau dekorasi tambahan untuk memperbagus blog. Contohnya saja pada menu atau sidebar bila ditambahkan icon font awesome akan terlihat lebih keren dan bagus.

Tetapi sebelum kita masuk ke cara penggunaan silahkan agan buka edit template dan masukkan kode javascript dibawah ini tepat diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Jika sudah terpasang kita lanjut ke cara penggunaan secara detail. Dalam tahap ini sebaiknya agan konsentrasi dan harus fokus karena agak sedikit rumit untuk memahami ini tetapi jika agan sudah mengerti pasti bisa.

Silahkan perhatikan contoh css dibawah ini.

.sidebar {
    position: relative;
    ...
}
.sidebar:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Oke sekarang kita masuk ke pemahaman secara detail. Baca dengan benar gan

1. Kode .sidebar itu menunjukan targetnya gan contoh lainnya seperti .navbar atau mungkin .header pokoknya target yang ingin kita tambahkan icon font awesome
2. Kode position: relative; itu adalah kode yang harus kita tambahkan pada css target dan ini harus gan jadi kita hanya menambahkan kode tersebut sebagai contoh isi dari css nya .sidebar{color: #000;position: relative; padding: 10px;} itu hanya contoh
3. Kode :before kita gunakan untuk icon nya gan sekarang agan tinggal copypaste semua kode dari .sidebar:before{...} dan selanjutnya tinggal ganti .sidebar dengan target yang sama yang tadi sudah ditambahkan kode position: relative;
4. Kode "\f000" ini adalah kode dari icon font awesome sendiri, nanti dibawah ini agan bisa mendapatkan kumpulan icon dari icon font awesome

Untuk kode lainnya saya rasa itu adalah kode biasa yang biasa ada pada css. Sekarang untuk melihat daftar dari icon font awesome silahkan lihat di blog.kangismet.net.

Untuk melewati link shortener Adfocus tunggu selama 6 detik sampai ada tulisan skip ad dan klik itu maka otomatis link akan redirect ke link download sebenarnya.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Unknown

Saya tinggal di Cirebon dan besar di kota udang ini. Tertarik dengan dunia blog tidak membuat saya lupa dengan pendidikan dan agama. Kunci utama saya adalah percaya bahwa apapun yang terjadi, usaha dan doa itu nomor satu.

Artikel Terkait