cara memasang plugin icon font awesome di blog

cara memasang icon font awesome di blog, yups artikel kali ini membahas tentang memasang icon font awesome, mengenal tentang icon anda pasti sudah tau atau mungkin belum tau dengan yang namanya icon font awesome,

dari kata-katanya awesome alias keren, memang sihh beberapa blog akan terlihat keren jika memakai font yang satu ini. tak jarang banyak anda jumpai di blog-blog profesional.

paling sering anda jumpai font awesome ini ,terletak pada bagian menu dan beberapa elemen-elemen induk HTML lainnya. saya sendiri menggunakan font ini, jika anda lihat pada menu navigasi yang saya gunakan, serta dapat anda lihat lagi pada bagian sosial media dan sidebar blog saya, itu semua adalah font awesome.

saya rasa dari pada anda menggunakan icon bergambar jpg ataupun png, yang dapat memberatkan blog anda dan mengurangi kualitas SEOnya, apalagi jika ukurannya sangat besar, belum lagi anda repot harus menguploadnya.

maka dari itu dengan ketersediaan font awesome ini, blog ataupun situs jadi terlihat lebih menarik dan membuat navigasi-navigasi lebih jelas akan tombol-tombolnya.

font awesome ini selalu update, beberapa waktu lalu sempat update v.4.5 dan saya tidak tau jika fontnya telah update, maka meta font atau icon saya jadi missing icon karena tidak di update. jika anda merasa icon di blog anda hilang juga, sudah di pastikan, font awesome telah melakukan update meta scriptnya.

langkah yang paling baik ya mengupdate atau mengganti meta tag icon font awesome dengan meta yang baru, terutama bagi anda yang memakai template buatan orang lain, anda harus lihat lagi tampilan template anda.

dan bagi anda yang pemula mungkin belum tau ya ? anda dapat simak artikel ini, untuk membantu anda memasang atau mengganti update meta-link icon awesome blog anda. simak berikut ini :

cara memasang icon font awesome di blog

untuk langkah pertama memasang icon font awesome. pergi kesitusnya terlebih dahulu. buka link ini : font awesome .

anda akan melihat sebuah meta link seperti dibawah ini atau anda bisa copy meta link dibawah ini :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

selanjutnya letakkan code tersebut di meta link template anda, sekarang menuju ke menu Blogger - Template dan edit HTML. bisa anda lihat gambar dibawah ini, dimana saya telah mempunyai meta link icon awesome, nahh untuk anda yang kehilangan icon awesome anda wajib mengganti atau mengupdate ke v.4.5 bisa anda copy meta link awesome diatas. sehingga icon di template anda kembali muncul.
cara memasang icon font awesome di blog
cara memasang icon font awesome di blog

memasang icon font awesome di menu.

pada langkah ini kita mulai saja untuk memasang font awesome, sebelumnya dapat anda pilih terlebih dahulu iconnya yang akan dipasangkan di blog anda cukup klik ini : PILIH ICON jika sudah klik saja iconnya,

contoh disini adalah icon fa-bluetooth ,bisa anda lihat <i class="fa fa-bluetooth"></i> code ini yang nantinya akan anda terapkan pada HTML.contoh disini kita mulai dengan bagian menu. lihat pada code li menu dibawah ini ,ini adalah contoh code yang belum saya terapkan icon
        <li>
             <a alt='bluetooth' href='http://keren.blogspot.com' title='bluetooth'><span>bluetooth</span></a>
        </li>

anda letakkan tepat di sebelah kiri <span> ,maka akan terlihat seperti berikut :

        <li>
             <a alt='bluetooth' href='http://keren.blogspot.com' title='bluetooth'><i class="fa fa-bluetooth"></i><span>bluetooth</span>
            </a>
        </li>
anda dapat menerapkan pada list menu lainnya seperti cara diatas, tempatkan icon pada menu yang sesuai kategori anda

untuk ukuran icon : 

<i class="fa fa-camera-retro fa-lg"></i> ukuran normal
<i class="fa fa-camera-retro fa-2x"></i> ukuran small 2x
<i class="fa fa-camera-retro fa-3x"></i> ukuran medium 3x
<i class="fa fa-camera-retro fa-4x"></i> ukuran large 4x
<i class="fa fa-camera-retro fa-5x"></i> ukuran largest 5x
tambahkan fa-lg atau fa-2x untuk mengubah ukuran iconnya.sekarang blog anda dapat lebih rapi dan indah dengan adanya sebuah icon yang keren, seperti template-template blog orang lain.saya rasa sampai disini untuk cara memasang icon font awesome di blog, baca artikel yang lainnya diblog saya tentang HTML, dan CSS. terimakasih semoga bermanfaat. ^_^

1 komentar so far

Tolong check email masuk

- Berkomentarlah dengan sopan.
- No Link Aktif, SPAM, SARA P#RN.
- Jangan membalas yang tidak sesuai tema.
- Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
EmoticonEmoticon