На сайте иконка: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

Сайт 

Содержание

html — Как правильно вставлять в сайт иконки

Исходный код иконки конверта:

<svg viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 3.373V10.5C16 11.163 15.7366 11.7989 15.2678 12.2678C14.7989 12.7366 14.163 13 13.5 13h3.5C1.83696 13 1.20107 12.7366 0.732233 12.2678C0.263392 11.7989 0 11.163 0 10.5V3.373L7.746 7.931C7.82295 7.97638 7.91066 8.00032 8 8.00032C8.08934 8.00032 8.17705 7.97638 8.254 7.931L16 3.373ZM13.5 3.09527e-08C14.1151 -9.6716e-05 14.7087 0.226607 15.1672 0.63674C15.6257 1.04687 15.9168 1.61164 15.985 2.223L8 6.92L0.0150001 2.223C0.0831583 1.61164 0.374324 1.04687 0.832795 0.63674C1.29127 0.226607 1.88485 -9.6716e-05 2.5 3.09527e-08h23.5Z" fill="white"/>
</svg>

Исходный код иконки поинта:

<svg viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.83333 7.91667C5.2808 7.91667 4.7509 7.69717 4.36019 7.30647C3.96949 6.91577 3.75 6.38587 3.75 5.83333C3.75 5.2808 3. 96949 4.7509 4.36019 4.36019C4.7509 3.96949 5.2808 3.75 5.83333 3.75C6.38587 3.75 6.91577 3.96949 7.30647 4.36019C7.69717 4.7509 7.91667 5.2808 7.91667 5.83333C7.91667 6.10692 7.86278 6.37783 7.75808 6.63059C7.65339 6.88335 7.49993 7.11302 7.30647 7.30647C7.11302 7.49993 6.88335 7.65339 6.63059 7.75808C6.37783 7.86278 6.10692 7.91667 5.83333 7.91667V7.91667ZM5.83333 0C4.28624 0 2.80251 0.614582 1.70854 1.70854C0.614582 2.80251 0 4.28624 0 5.83333C0 10.2083 5.83333 16.6667 5.83333 16.6667C5.83333 16.6667 11.6667 10.2083 11.6667 5.83333C11.6667 4.28624 11.0521 2.80251 9.95812 1.70854C8.86416 0.614582 7.38043 0 5.83333 0V0Z" fill="white"/>
</svg>

Можно вставлять SVG код прямо в HTML разметку, он может казаться там поначалу чуждым, но это нормальная практика и единственная возможность работать с отдельными его частями. Чтобы поменять цвет через

CSS, нужно у элементов которые будут перекрашиваться убрать атрибуты fill или stroke (смотря что будет перекрашиваться).

svg {
  width: 9vmax;
  height: 9vmax;
}
.icon-1 {
  fill: tomato;
  transition: fill 0.4s;
}
.icon-1:hover {
  fill: lightgreen;
}
.icon-2 {
  fill: none;
  stroke: tomato;
  transition: stroke 0.4s;
}
.icon-2:hover {
  stroke: lightgreen;
}
<!-- icon 1 -->
<svg viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg">
<path d="M16 3.373V10.5C16 11.163 15.7366 11.7989 15.2678 12.2678C14.7989 12.7366 14.163 13 13.5 13h3.5C1.83696 13 1.20107 12.7366 0.732233 12.2678C0.263392 11.7989 0 11.163 0 10.5V3.373L7.746 7.931C7.82295 7.97638 7.91066 8.00032 8 8.00032C8.08934 8.00032 8.17705 7.97638 8.254 7.931L16 3.373ZM13.5 3.09527e-08C14.1151 -9.6716e-05 14.7087 0.226607 15.1672 0.63674C15.6257 1.04687 15.9168 1.61164 15.985 2.223L8 6.92L0.0150001 2.223C0.0831583 1.61164 0.374324 1.04687 0.832795 0.63674C1.29127 0.226607 1.88485 -9.6716e-05 2.5 3.09527e-08h23.5Z"/>
</svg>
<!-- icon 2 -->
<svg viewBox="0 0 12 17" xmlns="http://www.w3.org/2000/svg">
<path d="M5.
 
 83333 7.91667C5.2808 7.91667 4.7509 7.69717 4.36019 7.30647C3.96949 6.91577 3.75 6.38587 3.75 5.83333C3.75 5.2808 3.96949 4.7509 4.36019 4.36019C4.7509 3.96949 5.2808 3.75 5.83333 3.75C6.38587 3.75 6.91577 3.96949 7.30647 4.36019C7.69717 4.7509 7.91667 5.2808 7.91667 5.83333C7.91667 6.10692 7.86278 6.37783 7.75808 6.63059C7.65339 6.88335 7.49993 7.11302 7.30647 7.30647C7.11302 7.49993 6.88335 7.65339 6.63059 7.75808C6.37783 7.86278 6.10692 7.91667 5.83333 7.91667V7.91667ZM5.83333 0C4.28624 0 2.80251 0.614582 1.70854 1.70854C0.614582 2.80251 0 4.28624 0 5.83333C0 10.2083 5.83333 16.6667 5.83333 16.6667C5.83333 16.6667 11.6667 10.2083 11.6667 5.83333C11.6667 4.28624 11.0521 2.80251 9.95812 1.70854C8.86416 0.614582 7.38043 0 5.83333 0V0Z"/>
</svg>

Если иконок много и с ними никаких сложным манипуляций делать не нужно, то можно создать спрайт, делается он следующим образом:

<svg xmlns="http://www.w3.org/2000/svg">
   <!-- svg заменяем на symbol, убираем все кроме viewBox, и задаем id(название иконки)-->
   <symbol viewBox="0 0 16 13">
     <path d="M16 3.
 
 373V10.5C16 11.163 15.7366 11.7989 15.2678 12.2678C14.7989 12.7366 14.163 13 13.5 13h3.5C1.83696 13 1.20107 12.7366 0.732233 12.2678C0.263392 11.7989 0 11.163 0 10.5V3.373L7.746 7.931C7.82295 7.97638 7.91066 8.00032 8 8.00032C8.08934 8.00032 8.17705 7.97638 8.254 7.931L16 3.373ZM13.5 3.09527e-08C14.1151 -9.6716e-05 14.7087 0.226607 15.1672 0.63674C15.6257 1.04687 15.9168 1.61164 15.985 2.223L8 6.92L0.0150001 2.223C0.0831583 1.61164 0.374324 1.04687 0.832795 0.63674C1.29127 0.226607 1.88485 -9.6716e-05 2.5 3.09527e-08h23.5Z"/>
   </symbol>
  
  <symbol viewBox="0 0 12 17">
    <path d="M5.83333 7.91667C5.2808 7.91667 4.7509 7.69717 4.36019 7.30647C3.96949 6.91577 3.75 6.38587 3.75 5.83333C3.75 5.2808 3.96949 4.7509 4.36019 4.36019C4.7509 3.96949 5.2808 3.75 5.83333 3.75C6.38587 3.75 6.91577 3.96949 7.30647 4.36019C7.69717 4.7509 7.91667 5.2808 7.91667 5.83333C7.91667 6.10692 7.86278 6.37783 7.75808 6.63059C7.65339 6.88335 7.49993 7.11302 7.30647 7.30647C7.11302 7.49993 6.

  
 88335 7.65339 6.63059 7.75808C6.37783 7.86278 6.10692 7.91667 5.83333 7.91667V7.91667ZM5.83333 0C4.28624 0 2.80251 0.614582 1.70854 1.70854C0.614582 2.80251 0 4.28624 0 5.83333C0 10.2083 5.83333 16.6667 5.83333 16.6667C5.83333 16.6667 11.6667 10.2083 11.6667 5.83333C11.6667 4.28624 11.0521 2.80251 9.95812 1.70854C8.86416 0.614582 7.38043 0 5.83333 0V0Z"/>
  </symbol>
  
</svg>

Сохраняем этот код в файл с любым названием, пусть будет icons.svg и используем на странице следующим образом:

<svg>
  <!-- assets/images/icons/icons.svg - путь до файла -->
  <!-- #svg-mail - id икноки -->
  <use xlink:href="assets/images/icons/icons.svg#svg-mail"></use>
</svg>
<svg>
  <use xlink:href="assets/images/icons/icons.svg#svg-point"></use>
</svg>

Либо можно не сохранять в файл и вставить код этого спрайта в начало страницы, скрыв его при этом с помощью

display: none:

svg {
  width: 10vmax;
  height: 10vmax;
}
. icon-1 {
  fill: tomato;
  transition: fill 0.4s;
}
.icon-1:hover {
  fill: lightgreen;
}
.icon-2 {
  fill: none;
  stroke: tomato;
  transition: stroke 0.4s;
}
.icon-2:hover {
  stroke: lightgreen;
}
<svg xmlns="http://www.w3.org/2000/svg">
   <symbol viewBox="0 0 16 13">
     <path d="M16 3.373V10.5C16 11.163 15.7366 11.7989 15.2678 12.2678C14.7989 12.7366 14.163 13 13.5 13h3.5C1.83696 13 1.20107 12.7366 0.732233 12.2678C0.263392 11.7989 0 11.163 0 10.5V3.373L7.746 7.931C7.82295 7.97638 7.91066 8.00032 8 8.00032C8.08934 8.00032 8.17705 7.97638 8.254 7.931L16 3.373ZM13.5 3.09527e-08C14.1151 -9.6716e-05 14.7087 0.226607 15.1672 0.63674C15.6257 1.04687 15.9168 1.61164 15.985 2.223L8 6.92L0.0150001 2.223C0.0831583 1.61164 0.374324 1.04687 0.832795 0.63674C1.29127 0.226607 1.88485 -9.6716e-05 2.5 3.09527e-08h23.5Z"/>
   </symbol>
  
  <symbol viewBox="0 0 12 17">
    <path d="M5.83333 7.91667C5.2808 7.91667 4.7509 7.69717 4.36019 7.30647C3.96949 6.
 
 91577 3.75 6.38587 3.75 5.83333C3.75 5.2808 3.96949 4.7509 4.36019 4.36019C4.7509 3.96949 5.2808 3.75 5.83333 3.75C6.38587 3.75 6.91577 3.96949 7.30647 4.36019C7.69717 4.7509 7.91667 5.2808 7.91667 5.83333C7.91667 6.10692 7.86278 6.37783 7.75808 6.63059C7.65339 6.88335 7.49993 7.11302 7.30647 7.30647C7.11302 7.49993 6.88335 7.65339 6.63059 7.75808C6.37783 7.86278 6.10692 7.91667 5.83333 7.91667V7.91667ZM5.83333 0C4.28624 0 2.80251 0.614582 1.70854 1.70854C0.614582 2.80251 0 4.28624 0 5.83333C0 10.2083 5.83333 16.6667 5.83333 16.6667C5.83333 16.6667 11.6667 10.2083 11.6667 5.83333C11.6667 4.28624 11.0521 2.80251 9.95812 1.70854C8.86416 0.614582 7.38043 0 5.83333 0V0Z"/>
  </symbol>
</svg>
<header></header>
<main>
  <svg>
    <use xlink:href="#svg-mail"></use>
  </svg>
  <svg>
    <use xlink:href="#svg-point"></use>
  </svg>
</main>
<footer></footer>

Примеры использования Font Awesome

После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега <i>. Некоторые примеры были позаимствованы из документации Bootstrap.

The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

Пример: Базовые иконки fa-camera-retro

Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег <i> так как он очень короткий, но использование тега <span> будет семантически более правильно).

<i></i> fa-camera-retro