Cara Menambahkan Icon Fonts Awesome Pada Menu Blog

Cara Menambahkan Icon Fonts Awesome Pada Menu Blog


Taufiknh.my.id.  Kali ini saya akan membagikan tutorial cara menambahkan icon fonts awesome pada menu blog. Namun dalam penerapannya nanti bisa digunakan untuk penulisan apa saja jika dalam postingaan kalian ingin menambahkan icon fonts awesome bisa juga digunakan.

Tapi sebelum melanjutkan ke tutorial kalian boleh tekan tombol lonceng merah dipojok kiri blog saya. Kalian akan mendapatkan notifikasi jika ada update postingan dari blog taufiknh.my.id. gratis.

Kalian bisa lihat menu di blog taufiknh.my.id. terlihat icon atau gambar kecil sebelum nama menu. Seperti Menu "Home" nampak gambar rumah atau gedung kecil. atau "Seputar Blog" terdapat gambar komputer. Perhatikan gambar di bawah ini.

Icon Font Awesome pada Menu Blog

Dengan menambahkan icon font awesome pada menu akan mempercantik tampilan blog kalian. Jika kalian ingin menambahkan icon pada menu seperti blog saya ikuti langkah-langkahnya.

Cara Menambahkan Icon Fonts Awesome Pada Menu Blog, berikut ini langkahnya:

Langkah Pertama:

Silahkan kalian kunjungi website font awesome alamat website https://fontawesome.com/icons selanjutnya plih icon mana yang ingin dtambahkan pada blog. caranya tulis pada tab pencarian, sebagai contoh mencari icon home. tulis "Home" lalu klik gambarnya. untuk pemilihan gambar harus yang hitam tebal, jika warnanya tidak aktif berarti itu versi "pro" silahkan pilih gambar yang  free dengan cara diklik.




Klik saja gambar rumah seperti yang saya lingkari pada gambar di atas. Maka akan muncul tampilan seperti berikut ini:



Perhatikan gambar diatas yang sudah saya lingkari, kita sudah mendapatkan kodenya yaitu: <i class="fas fa-home"></i> selanjutnya kalian masukan class tersebut ke dalam menu HTML template kalian.


Tambahkan kode class tadi, letakkan sebelum nama yang ingin kalian berikan icon fonts awesome.

Sebelum ditambahkan fonts awesome:

<li><a href='https://www.taufiknh.my.id'> Home</a></li>

Sesudah

<li><a href='https://www.taufiknh.my.id'><i class='fas fa-home'/> Home</a></li>

Setelah itu Simpan dan lihat hasilnya.

Langkah Kedua:

Jika template menu kalian belum ada perubahan kemungkinan template kalian belum terpasang CSS bawaan template. maka yang harus dilakukan adalah menyimpan CSS kedalam template kalian terlebih dahulu dengan cara kembali ke menu awal website fonts awesome.


Selanjutnya klik "Star Using Free" maka akan muncul tampilan seperti gambar di bawah ini, kalian Copy kodenya lalu simpan diatas </head> pada template blog kalian.


Selanjutnya kalian simpan. dan coba lagi lihat "preview" apakah ada perubahan.

Jika belum saja ada perubahan coba cek lagi kode HTML nya jangan sampai salah. perhatikan gambar diatas kalian block / sorot lalu tekan CTRL+C atau tekan saja tanda lingkaran biru di pojok kanan bawah kotak tersebut. lalu  paste kan diatas </head>.  Lalu simpan.

Apakah sudah berhasil. Jika belum kemungkinan anda belum ngopi nih. Atau kalian lapar, kalau lapar makan dulu masak mie instan.

Jika langkah ini masih saja belum ada perubahan tampilan iconnya parse atau konversikan terlebih dulu kode tadi. Untuk merubahnya silahkan masukkan kode tersebut untuk di parse klik link berikut "Parse HTML".

Hasil yang sudah di Parse:

&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"&gt;

Silahahkan Copy dan letakkan di atas </head> lalu Simpan.

Icon Kode Fonts Awesome
<i class="fas fa-home"></i>
<i class="fas fa-laptop"></i>
<i class="fab fa-blogger-b"></i>
<i class="fas fa-address-card"></i>
<i class="fas fa-tools"></i>
Jika berhasil atau ada kendala silahkan tulis di kolom komentar.

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini.

1. Berikan centang pada kotak Notify me/Beri tahu saya untuk mendapatkan notifikasi komentar.
2. Jika Anda sengaja menambahkan link saat komentar akan dihapus dan tidak akan dipublikasikan.

- taufiknh.my.id -

Previous Post Next Post

نموذج الاتصال