Puricons

Puricons

Бесплатный
иконочный шрифт
для небольшого сайта или блога

Использование

  1. Скачайте и распакуйте архив. Откройте файл demo.html в браузере — в нем содержатся превью всех иконок шрифта с их селекторами CSS.
  2. Файлы из папки fonts поместите в каталог с шрифтами на сервере.
  3. Файл puricons.css поместите в папку с файлами стилей. Подключите файл внутри тега <head> или, при наличии CMS, способом, рекомендуемым в документации.

Готово!

Иконки имеют общий CSS селектор «puic» и отдельные собственные селекторы для модификации. Попробуйте вставить этот код в HTML страницы:

<i class="puic pi-like"></i>

Если все сделано верно, то увидите «лайк»:

Все иконки имеют строго одинаковый размер, поэтому их удобно использовать вписанными в квадрат или круг. Например,

.pi-heart {background: #C85050; font-size: 50px;}

.pi-arrow-share {background: #0099AA; font-size: 50px; border-radius: 50%;}

Пример анимации при наведении:

.pi-camera {color: #C85050; border: 2px solid; font-size: 50px; transition: all .2s ease-in-out}
.pi-camera:hover {color: #fff; background: #C85050;}

Если вы хотите узнать подробнее о том, как это работает, а может создать свой собственный иконочный шрифт, прочтите эту статью на сайте Devtool: