Есть ли другой способ получения иконок без использования bootstrap

Question

У меня есть HTML коды, которые я сделал с чистыми html и CSS, мне нужно добавить к нему значки, такие как 'home', но я не знаю, как это сделать, я не знаю, как использовать bootstrap так что скажите, пожалуйста, как я могу получить значки с помощью HTML или чего-то еще

Answer 1

лучший способ, на мой взгляд, - получить любые значки в виде SVG-кода, например, вы можете скачать иконки fontawesome как SVG

, а затем минимизировать их через этот веб-сайт https://vecta.io/nano

после этого добавьте минимизированный код SVG в HTML и добавьте немного стиля

таким образом вы уменьшите количество HTTP-запросов и в то же время не потеряете качество

ps: вам нужно определить наилучшую настройку значений атрибута [viewBox = "0 0 384 512"], потому что, если ваш код SVG не имеет правильных значений атрибута viewBox, вы не сможете масштабировать свой SVG через CSS

.iconsWrapper {
    width: 50px;
    height: 50px;
    display: inline-block;
}

.icon {
    width: 100%;
    height: 100%;
}

.stack {
    fill: #F48024;
}

<span class="iconsWrapper">
  <svg class="stack icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" xmlns:v="https://vecta.io/nano">
      <path d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z" />
  </svg>
</span>