iklan horizontal atas

Cara Membuat Dan Memasang Icon Font Awesome Pada Menu Blog Anda

Hai maschasil.com -  Hallo anda para blogger yang mau kepinginan dalam pengelolaan website agar menjadi cantik ataupun menarik. Pastinya dengan ada tambahan icon agar terlihat bagus ketika dilihat. Maksudnya dengan adanya icon pada website anda terhadap tampilan dari sebuah blog anda akan lebih menarik. Akan tetapi bagi anda yang belum memahami pasti belum bisa dalam membuat icon. Karena memang tidak mudah dan harus mempunyai skill dalam membaca HTML atau script dalam peletakan icon tersebut.

Bagi anda yang belum mengetahui pasti akan bingung, nah, disini kita akan membahasnya dari dasar terlebih dahulu. Font Awesome merupakan font yang didalamnya memberikan berbagai macam icon yang sudah dimuat pada frontwork css. Dengan ini bisa mempermudah dalam menampilkan icon- icon yang sudah tersedia berbagai macam icon menarik dan bisa untuk dipercantik di tampilan visual website atau blog yang anda kelola. Baca : Manfaat Mengikuti Lomba Blog Dalam Mengasah Skill Blogging
Membuat Dan Memasang Icon Font Awesome

Didalam situs tersebut ada berbagai jenis icon dan ketika anda mau memilih akan kesusahan karena banyak sekali icon- icon yang akan anda gunakan sesuai kebutuhan anda. Kalau memang anda mau lebih tahu ada banyak pilihan icon yang ada pada situs. Coba anda kunjungi fontawesome.com. kemudian anda setelah terbuka situs tersebut. Anda pilih menu icon dan anda bisa memilih salah satu icon tersebut.

Sebetulnya di font awesome seharusnya diperlukan pada desai bootstap. Akan tetapi juga bisa dipakai untuk framework dalam mempercantik web dengan adanya frontwork css. Memang dengan adanya front awesome adalah vector. Maka dari itu anda bisa melakukan dengan bebas dalam penggunaan ukuran besar maupun kecil dan bagi anda tidak usah khawatir dengan adanya gambar pecah.

Cara Membuat Dan Memasang Icon Font Awesome Pada Menu Blog Anda

Kalau anda sudah memahami apa itu icon font awesome, maka dari itu silahkan anda lihat cara dan langkah- langkah yang anda harus lakukan agar dalam tata letak tidak keliru. Karena jika ada yang salah dalam tata letak, maka akan berakibat fatal pada html diblog anda.

Pertama, anda login blogger anda. Kemudian anda pilih menu Tema, setelah itu pilih Edit HTML.

Kedua, setelah anda buka kemudian anda akan melihat tampilan script HTML. Perhatikan, jangan ada yang sampai menghapus script pada HTML blog anda.

Ketiga, setelah itu anda letakkan script dibawah ini diatas script </body>. Dengan cara anda CTRL + F, nanti anda cari script </body>. Ini scriptnya :

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> 

Keempat, anda bisa menggunkana icon dengan script dibawah ini pada menu navigasi header anda. Sehingga nanti tampilannya akan seperti pada website maschasil.com ini.

<i aria-hidden='true' class='fa fa-home'/>
<i aria-hidden='true' class='fa fa-bars'/>
<i aria-hidden='true' class='fa fa-cloud-download'/>
<i aria-hidden='true' class='fa fa-coffee'/>
<i aria-hidden='true' class='fa fa-comments'/>
<i aria-hidden='true' class='fa fa-desktop'/>
<i aria-hidden='true' class='fa fa-circle'/>
<i aria-hidden='true' class='fa fa-user'/>
<i aria-hidden='true' class='fa fa-angle-right'/>

Disini akan contohkan dibawah ini anda letakkan script diatas pada script yang sudah berwarna merah.
<li><a href='https://www.maschasil.com/search/label/bisnis'><i aria-hidden='true' class='fa fa-bars'/> Bisnis</a></li>

Keterangan :
  • warna biru asli dari HTML
  • warna merah script icon font awesome


Kelima, setelah anda menerapkan seperti contoh diatas, maka anda jangan lupa Save Editing yang sudah anda lakukan. Dan kemudian coba anda buka. Dan berhasil. Baca : Pendapatan Blogger Mastrigus.com Mencapai 7 Juta Per Bulan

Cukup sekian artikel Cara Membuat Dan Memasang Icon Font Awesome Pada Menu Blog Anda. Kalau memang dari anda masih belum paham dengan tutorial diatas. Anda bisa tinggal komentar dibawah. Semoga informasi ini bisa memberikan manfaat untuk anda. Dan bisa untuk menjadi tampilan blog anda semakin menarik. Selamat mencoba.

1 Komentar untuk "Cara Membuat Dan Memasang Icon Font Awesome Pada Menu Blog Anda"

Syarhabil Abdussalam mengatakan...

mas,udah berhasil tapi kok font menunya jadi berubah

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel