Cara Menambahkan Icon Bootstrap di Blog

Ada banyak situs penyedia icon gratis yang bisa di gunakan untuk keperluan tampilan website. Salah satunya adalah Icon Bootstrap.

Bootstrap memiliki lebih dari 1.900 koleksi icon yang dapat di download dengan format SVG atau digunakan di halaman website dengan format font web.

Di artikel kali ini kita akan berbagi tutorial cara pasang dan menggunakan icon bootstrap di blog.

Cara Membuat Toggle Dark Mode Bootstrap 5.3 - InpuTekno

Cara mengaktifkan dan memasang toggle dark mode bootstrap di blog yang menggunakan template blog dari bootstrap.

www.inputekno.com

Cara Pasang Icon Bootstrap di Blog

Langkah pertama cara pasang pasang icon bootstrap, salin dan paste tautan CDN berikut di atas tag </head> template.

<link href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css' rel='stylesheet' />

Cara Menggunakan Icon Bootstrap

Untuk menggunakan icon bootstrap, kita bisa menggunakan tag <i> dengan class icon bootstrap .bi-* seperti contoh berikut:

<!--icon_app_indicator-->
<i class="bi bi-app-indicator"></i>

<!--icon_archive-->
<i class="bi bi-archive"></i>

Di mana class bi-app-indicator adalah nama class icon yang akan di tampilkan. Misalnya bi-twitter, bi-facebook, bi-instagram dan seterusnya.

Contoh Penerapan Icon

Berikut adalah contoh sederhana penerapan icon bootstrap pada menu navigasi blog

<nav class='navbar'>
  <ul class='navbar-nav'>
    <li class='nav-item'>
      <a class='nav-link' href='/search'>
        <!-- Icon Navigasi -->
        <i class='bi bi-file-earmark-text'/>
        Article
      </a>
    </li>
    <li class='nav-item'>
      <a class='nav-link' href='/p/forum.html'>
        <!-- Icon Navigasi -->
        <i class='bi bi-chat-square-dots'/>
        Forum
      </a>
    </li>
    <li class='nav-item'>
      <a class='nav-link' href='/p/doc.html'>
        <!-- Icon Navigasi -->
        <i class='bi bi-code-square'/>
        Code
      </a>
    </li>
  </ul>
</nav>

Kita juga bisa menerapkan icon bootstrap dengan code point HTML atau CSS. Dengan mengatur element font-family ke 'Bootstrap-icons'.

Contoh penerapan icon bootstrap menggunakan code point HTML:

<style type='text/css'>
/* CSS icon Bootstrap */
.nav-link {font-family:'Bootstrap-icons';...}
</style>

<nav class='navbar'>
  <ul class='navbar-nav'>
    <li class='nav-item'>
      <a class='nav-link' href='/search'>
        <!-- Icon Navigasi -->
        &#xF38B Article 
      </a>
    </li>
    ...
  </ul>
</nav>

Contoh penerapan icon bootstrap menggunakan code point CSS:

<style type='text/css'>
/* CSS icon Bootstrap */
.articleC::before {font-family:'Bootstrap-icons';content:'\F38B';}
</style>

<nav class='navbar'>
  <ul class='navbar-nav'>
    <li class='nav-item'>
      <a class='nav-link articleC' href='/search'>
        <!-- Icon Navigasi -->
        Article 
      </a>
    </li>
    ...
  </ul>
</nav>

\F38B adalah code point css icon bootstrap yang digunakan mengisi nilai properti content.

Linktree Blogger Template With Bootstrap Free! - InpuTekno

Linktree Blogger Template gratis untuk menampilkan berbagai link promosi di halaman blog.

www.inputekno.com

Penutup

Nah itu tadi tutorial cara pasang dan menggunakan icon bootstrap di blog. Semoga artikel ini bisa bermanfaat. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.