Cara Menambahkan Icon Di Sajian Kafe Dengan Font Awesome

Cara Menambahkan Icon Di Sajian Kafe Dengan Font Awesome

memasang icon di sajian navigation bar

Tutorial Cara Menambahkan Icon di Menu Navigation Bar Menggunakan Font Awesome

Cara Menggunakan Icon Font Awesome di Blog, pada postingan kali ini aku akan membagikan tutorial memakai Font Awesome untuk menampilkan icon di blogger dengan mudah dan cepat.

Untuk menampilkan atau memasang icon sendiri ada banyak cara, dapat menggunakan gambar / logo, icon SVG, CSS Background dll, tapi supaya lebih simple dan gampang kita gunakan saja Font Awesome

Sebelumnya aku sudah pernah posting beberapa sajian navigasi / sajian kafetaria yang sudah di tambahkan icon, jadi kalian tinggal mengganti HTML iconnya saja, tanpa menambahkan css lain kecuali CSS Font Awesomenya. Untuk linknya dapat liat di post berikut

Cara memakai Font Awesome

  • Untuk menampilkan icon dengan FontAwesome, kalian terlebih dahulu harus memasang CSS fontnya di template
  • Sekarang masuk ke TemplateEdit HTML, kemudian cari isyarat </head>
  • Setelah ketemu, masukan css font awesome dibawah ini sempurna diatasnya
  •  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/> 
  • Save Template

Untuk mendapat html iconnya kalian dapat mengambil di situs resminya, silahkan masuk ke link berikut ini Icon Pack FontAwesome, tinggal klik icon yang ingin di gunakan kemudian copy htmlnya.

Nah tahap selanjutnya kalian tinggal memilih daerah yang ingin dipasang icon, contohnya memasnagnya di sajian navigation bar.

Kalian Cari HTML menunya, buat yang belum tau mungkin dapat membacanya di tutorial sebelumnya wacana Tutorial Cara Edit Menu Navigation Bar

  • Kalo html menunya sudah keemu, misal struturnya menyerupai dibawh ini ↓
  •  <nav class='contoh'>  <ul>   <li><a href="/">Home</a></li>   <li><a href="#">Tutorial</a></li>   <li><a href="URL">Widget</a></li>   <li><a href="UTL">Template</a></li>   <li><a href="https://mastamvan.blogspot.com">Tips & Trik</a></li> </ul>  </nav> 
  • Kalian tinggal tambahkan HTML icon yang sudah di copy di sebelah Judul Menunya, Contoh :

  • Cara Menambahkan Icon di Menu Bar dengan Font Awesome Cara Menambahkan Icon di Menu Bar dengan Font Awesome
    Klik Untuk Memperbesar

     <li><a href="/"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li> 
  • Begitu juga dengan Judul sajian yang lainnya, kalo kalian ingin memasang iconnya di semua menu.
  • Kalo sudah, tinggal save
Buat yang ingin memasangnya di daerah lain, kalian tinggal mencari HTMLnya kemudian masukan iconnya menyerupai di atas
Kalian juga dapat memasang iconnya melalui css tanpa harus memasang htmlnya
  • Kalo ada yang kurang mungkin nanti akan aku tambahkan
  • Buat kalian yang belum mengerti dapat bertanya di kolom komentar.

cukup sekian artikel wacana Tutorial Cara Menmasang Icon di Menu Menggunakan Font Awesome ini agar bermanfaat. Keyword Terkait : Cara Memasang Icon Font Awesome di Menu Blogger, Tutorial Cara Menggunakan Font Awesome di Blog, menambahkan icon di sebelah sajian bar


Sumber https://mastamvan.blogspot.com/

Baca juga:

Blogger
Disqus
Pilih Sistem Komentar

No comments

Silahkan berkomentar.
Perhatian! Komentar yang mengandung spam tidak akan di terima.