HTML: Cara Menambahkan Icon Di Halaman Web Anda

Posted 2024-05-03 01:06:36

Saat mendesain sebuah situs web, menambahkan ikon bisa memberikan sentuhan visual yang menarik dan membantu pengguna memahami konten dengan lebih cepat. Salah satu cara untuk melakukan hal ini adalah dengan menggunakan ikon dari sumber eksternal seperti HyTech Icons.

HyTech Icons adalah sebuah library icon bundle yang memiliki 44.000 lebih icon dan juga kaya dan bervariasi yang dapat diintegrasikan ke dalam proyek web dengan mudah. Dalam tutorial ini, kita akan mempelajari cara menambahkan ikon dari HyTech Icons ke dalam dokumen HTML.

Langkah 1: Mengakses HyTech Icons

Langkah pertama adalah mengakses tautan referensi HyTech Icons di https://hytech-icons.vercel.app/. Di situs tersebut, Anda akan menemukan berbagai macam ikon yang tersedia untuk digunakan. Anda bisa menelusuri katalog ikon untuk memilih yang sesuai dengan kebutuhan proyek Anda.

Langkah 2: Memilih Ikon

Setelah menemukan ikon yang ingin Anda gunakan, Anda perlu meng-klik ikon tersebut. maka akan otomatis menyalin kodenya yang siap di terapkan.

Langkah 3: Menambahkan Ikon ke HTML

Setelah Anda memilih ikon yang diinginkan, langkah selanjutnya adalah menambahkannya ke dalam dokumen HTML.

Anda bisa melakukannya dengan menerapkan kode yang sudah anda salin sebelumnya kedalam dokumen html Anda contohnya.

SVG:

    
<!-- Add Icon SVG -->
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg" width="24" height="24"/>
</svg>

Image:

    
<!-- Add Icon IMG -->
<img src="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg" width="50" height="50">

CSS:

    
/* Add Icon CSS */
.example {
  width: 50px;
  height: 50px;
  background-image: url('http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg');
}

Object:

    
<!-- Add Icon Object -->
<object type="image/svg+xml" data="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg" width="50" height="50"></object>

Canva:

    
<!-- Add Icon Canva -->
<canvas id="myCanvas" width="50" height="50"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var img = new Image();
  img.onload = function() {
    context.drawImage(img, 0, 0, 50, 50);
  }
  img.src = 'http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg';
</script>

Embed:

    
<!-- Add Icon Embed -->
<embed src="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg" type="image/svg+xml" width="50" height="50">

Sampai sini Anda sudah berhasil menerapkan atau menambahkan ikon di halaman website HTML., Anda juga bisa mengkustom ikon-ikon tersebut dengan cara di bawah ini.

Langkah 4: Kustomisasi

        
    <!-- Add in <head> -->
    <link href="http://hytech-icons.vercel.app/icon/pro/css/all.min.css" rel="stylesheet" type="text/css">

    
// Mengubah kode warna dengan milik Anda.
?color=000000

// Contoh (tanpa #)
http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg?color=ff00ff

// Mengubah ukuran ikon
<svg width="24" height="24" ...

// Rotasi
<svg class="fa-rotate-90" ...
<svg class="fa-rotate-180" ...
<svg class="fa-rotate-270" ...
<svg class="fa-flip-horizontal" ...
<svg class="fa-flip-vertical" ...
<svg class="fa-flip-both" ...

// Ikon lebar tetap
<svg class="fa-fw" ...

// Ikon berbatasan dan ditarik
<svg class="fa-border" ...
<svg class="fa-2x fa-pull-left" ...
<svg class="fa-2x fa-pull-right" ...

// Ikon penumpukan
<svg class="fa-stack" ...
<svg class="fa-stack fa-2x" ...
<svg class="fa-stack-2x" ...
<svg class="fa-stack-1x fa-inverse" ...

Langkah 5: Animasi

    
<!-- Tambahkan didalam tag <head> -->
<link href="http://hytech-icons.vercel.app/icon/pro/css/all.min.css" rel="stylesheet" type="text/css">

Beat:


  <svg class="fa-beat" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-beat" style="--fa-animation-duration: 0.5s;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-beat" style="--fa-animation-duration: 2s;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-beat" style="--fa-beat-scale: 2.0;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>

Fade:


  <svg class="fa-fade" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>

Beat-Fade:


  <svg class="fa-beat-fade" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-beat-fade" style="--fa-beat-fade-opacity: 0.1; --fa-beat-fade-scale: 1.25;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-beat-fade" style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>

Bounce:


  <svg class="fa-bounce" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-bounce" style="--fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-bounce" style="--fa-bounce-start-scale-x: 1;--fa-bounce-start-scale-y: 1;--fa-bounce-jump-scale-x: 1;--fa-bounce-jump-scale-y: 1;--fa-bounce-land-scale-x: 1;--fa-bounce-land-scale-y: 1;--fa-bounce-rebound: 0;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>

Flip:


  <svg class="fa-flip" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>

Shake:


  <svg class="fa-shake" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>

Spin:


  <svg class="fa-spin" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-spin fa-spin-reverse" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-spin-pulse" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>
  <svg class="fa-spin-pulse fa-spin-reverse" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
  </svg>

Langkah 6: Mendukung Mode Gelap (Lanjutan)

    
<!DOCTYPE html>
<html lang="en">
<head>

	<!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
	<!-- //Tailwind CSS -->
	
	<!-- Konfigurasi Mode Gelap -->
    <script>
      tailwind.config = {
        darkMode: 'class',
      };
    </script>
	<!-- // Konfigurasi Mode Gelap -->
	
</head>
<body class="dark:bg-black">
	
  <!-- Pengalih Mode Gelap -->
  <div class="bg-gray-500 w-20 mx-auto mt-10 cursor-pointer rounded-3xl toggler dark:bg-green-500">
    <div class="bg-white w-10 h-10 scale-75 rounded-3xl transition-transform dark:bg-black"></div>
  </div>
  <!-- // Pengalih Mode Gelap -->

  <!-- Hytech Ikon -->
  <div class="flex justify-center">
    <svg class="changeable-svg" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg?color=ff00ff" width="24" height="24"/>
    </svg>
  </div>
  <!-- //Hytech Ikon -->
  
</body>

<!-- Alihkan fungsionalitas & manipulasi DOM untuk membuat ikon mendukung mode gelap -->
<script>
  function changeSVGColorInDarkMode(isDarkMode) {
    const svgs = document.querySelectorAll('.changeable-svg');
    svgs.forEach(svg => {
      const imageUrl = svg.querySelector('image').getAttribute('xlink:href');
      const updatedImageUrl = isDarkMode ? imageUrl.replace('color=ff00ff', 'color=ffff00') : imageUrl.replace('color=ffff00', 'color=ff00ff');
      svg.querySelector('image').setAttribute('xlink:href', updatedImageUrl);
    });
  }
  function toggleDarkMode() {
    const html = document.documentElement;
    html.classList.toggle('dark');
    const isDarkMode = html.classList.contains('dark');
    changeSVGColorInDarkMode(isDarkMode);
  }
  const toggler = document.querySelector('.toggler');
  toggler.addEventListener('click', toggleDarkMode);
  function initializeSVGColor() {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    changeSVGColorInDarkMode(isDarkMode);
  }
  initializeSVGColor();
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    changeSVGColorInDarkMode(event.matches);
  });
</script>
<!-- // Alihkan fungsionalitas & manipulasi DOM untuk membuat ikon mendukung mode gelap -->

</html>

icon

Please log in to like, share and comment!