/**/

Read     Cara menambahkan icon fontawesome, ionicons atau bootstrap icon di web dengan mudah

Cara menambahkan icon fontawesome, ionicons atau bootstrap icon di web dengan mudah

HTML
Hirzi Widyan Putra

Sekarang saya membagikan cara menambahkan icon fontawesome, ionicons dan bootstrap icon di web tanpa harus mendownload css dan javascriptnya tapi harus terkoneksi dengan internet yaa!

Cara menggunakan/menampilkan iconnya gampang banget yaitu

  1. Tinggal copy dan paste coding js/css yang sudah disiapkan untuk masing-masing icon

Nah untuk codingnya:

Fontawesome

    <!-- Copy ini untuk menggunakan icon fontawesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Ionicons

<!-- Copy ini untuk menggunakan icon ionicons -->
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Bootstrap

<!-- Copy ini untuk menggunakan icon bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
  1. Kalau sudah, tinggal ke halaman web masing masing juga untuk copy icon yang dimau, tinggal diklik copy dan paste di web kamu.

Kalau untuk list iconnya silahkan langsung ke halaman web masing-masing ya, berikut linknya:

Fontawesome : https://fontawesome.com/search

font-awesome web

Ionicons : https://ionic.io/ionicons

ionicons cara menggunakan

Bootstrap Icons : https://icons.getbootstrap.com/

bootstrap icon web tutorial

Coding lengkapnya nih kalau ada yang bingung:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@gilacoding</title>
  <style type="text/css">
   
.center-box{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 450px;
  width: 520px;
  color: #000;
  border-radius: 20px;
  box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.15);
  font-family: "Segoe UI";
  text-align: center;
  vertical-align: middle;
  padding-top: 20px;
  box-sizing: border-box;
}
  </style>

    <!-- Copy ini untuk menggunakan icon fontawesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />


    <!-- Copy ini untuk menggunakan icon bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">

</head>
<body>
  <div class="center-box">
      <h1><a href="https://fontawesome.com/search">fontawesome</a></h1> 
      <i class="fa-solid fa-house"></i> <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-face-smile"></i>
    <hr>
      <h1><a href="https://ionic.io/ionicons">ionicons</a></h1> 
     <ion-icon name="home"></ion-icon> <ion-icon name="heart"></ion-icon> <ion-icon name="happy"></ion-icon>
    <hr>
      <h1><a href="https://icons.getbootstrap.com/">bootstrap icons</a></h1> 
      <i class="bi bi-house-fill"></i> <i class="bi bi-heart-fill"></i> <i class="bi bi-emoji-smile-fill"></i>
    <hr>
      <p><a href="gilacoding.com">@gilacoding</a></p>
  </div>


  <!-- Copy ini untuk menggunakan icon ionicons -->
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

</body>
</html>

Selesai deh tutorial kali ini, kamu suka yang mana nih? atau ada yang lain dari ini?

Tiktok Gilacoding :  https://www.tiktok.com/@gilacoding

Youtube gilacoding : https://youtube.com/gilacoding

 Previous Post
Top