Cara Lengkap Memasang Font Awesome di Blog - Tegalwebside.com

Tuesday

Cara Lengkap Memasang Font Awesome di Blog

panduan Memasang Font Awesome di Blog

Tegalwebside.com - Sebelum kita memasang Font Awesome di blog, alangkah baiknya kita mengetahui dulu apa itu Font Awesome dan apa fungsinya? Font awesome merupakan font yang berisi ikon ikon khusus yang dimuat kedalam CSS. Fungsi utamanya untuk mempercantik tampilan menu pada blog atau website, selain itu penggunaan font ini juga dapat membantu meringankan loading blog karena pemasangan font ini tidak menggunakan pengkodean java script.
Font Awesome biasanya digunakan untuk mempercantik tampilan dengan mengganti tulisan dengan ikon dibagian tertentu misalnya pada menu, pencarian, sosial media share, profile dan widget.

Saat ini Font Awesome menyediakan ratusan icon menarik yang cukup lengkap, icon tersebut dapat kalian gunakan secara gratis maupun berbayar. Font Awesome juga dapat di percantik dengan tambahan style CSS seperti color, size, drop shadow, dan masih banyak lainya.

Baca Juga: Cara Membuat Sitemap keren dan Responsive

Gimana, sudah paham tentang Font Awesome? Nah, terus bagaimana caranya masang font awesome didalam template blog?

Cara Lengkap Memasang Font Awesome di Blog
Pada artikel ini saya menggunakan Font Awesome versi 5.7.0, dan disini saya akan memasang font awesome pada bagian menu home di blog saya.
  • Langkah pertama, silakan login ke akun blogger kalian.
  • Selanjutnya pada dashboard blogger masuk ke menu Tema → lalu pilih Edit HTML.
  • Kemudian copy dan pastekan kode CSS dibawah ini tepat diatas kode </head>.
 link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" 
  • Langkah kedua, silakan kunjungi situs https://fontawesome.com/
  • Selanjutnya cari gambar ikon dengan menggunakan kata kunci 'home'.
  • Setelah itu copy kode icon home tersebut. lihat gambar dibawah ini.
Cara Lengkap Memasang Font Awesome di Blog

  • Kemudian pasang kode icon home tersebut kedalam template blog, caranya masuk ke TemaEdit HMTL. lihat gambar screenshot dibawah ini.

  • Terakhir simpan dan selesai

Catatan: Untuk mengatur ukuran icon tersebut tambahkan kode fa-lg fa-fw dibagian akhir.
 <i class='fas fa-home fa-lg -fa fw></i>

<i class='fas fa-home fa-1x -fa fw></i>

<i class='fas fa-home fa-2x -fa fw></i>

<i class='fas fa-home fa-3x -fa fw></i>

<i class='fas fa-home fa-4x -fa fw></i>

<i class='fas fa-home fa-5x -fa fw></i>
SafelinkU | Shorten your link and earn money

Share with your friends

Related Posts

Give us your opinion

Berkomentarlah secara bijaksana dan bertanggung jawab. Tidak diperkenankan meng-copy sebagian atau seluruh konten tanpa seizin penulis.