PS-studio.info

О веб-дизайне: полезные сайты, статьи, файлы.

UXWing icons - бесплатный векторный набор иконок

28.02.2019, 09:13
Метки статьи: webfont, иконки



Иконки из набора доступны в различных форматах: в виде иконок шрифта (webfont), а также в форматах SVG, PNG.

Как использовать шрифтовые иконки?

Для начала необходимо скачать webfont icon pack (zip) - файл-архив с веб-шрифтами и css-стилями для шрифтов. После загрузки у вас будут все необходимые для подключения файлы.

Подключить на своей странице файл стилей uxwing-iconsfont.min.css:

Код
<link rel='stylesheet' href='ваш путь к файлу/uxwing-iconsfont.css' />


Затем необходимо разместить на сайте все шрифты (EOT, SVG, TTF, WOFF), которые доступны в папке шрифтов в архиве, что вы скачали.
Обратите внимание на корректность путей к этим шрифтам в файле стилей css.

Код

@font-face {
font-family: ‘uxwing-iconsfont’;
src: url(‘../yourpath/uxwing-iconsfont.eot?v=1.0’);
src: url(‘../yourpath/uxwing-iconsfont.eot?v=1.0#iefix’) format(’embedded-opentype’),
url(‘../yourpath/uxwing-iconsfont.ttf?v=1.0’) format(‘truetype’),
url(‘../yourpath/uxwing-iconsfont.woff?v=1.0’) format(‘woff’),
url(‘../yourpath/uxwing-iconsfont.svg?v=1.0#uxwing-iconsfont’) format(‘svg’);
font-weight: normal;
font-style: normal;}


Теперь вы можете использовать все иконки, размещая их либо непосредственно в html-коде:

Код
<i class="fi fi-check-mark-circle"></i>


либо в css-файле:

Код

.classname{position:relative;}

.classname:before{
content:"\e959";
font-family:"uxwing-iconsfont";
left:0px;
position:absolute;
top:0;
}


Готово! Теперь вы можете использовать и настраивать иконки в соответствии с вашими требованиями, такими как изменение их цвета, размера, применение эффектов CSS или анимации.

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход

    Creative Process Vector Icons - набор векторных иконок

    Мы не знаем, что вдохновило на создание этих векторных иконок, но они, несомненно, могут описать сюжет, как рождается блестящая идея. Потому что творчество не знает границ и пределов!
    Здесь 50 иконок для создания ваших проектов! Более того, они доступны в двух версиях: выберите любую, какую захотите, отрегулируйте размер, измените цветовое решение и разместите его там, где жаждет ваша душа. Это может быть приложение или веб-сайт, может быть реклама или баннер, пост в социальной сети ... Вобщем, мы не можем навязать вам цель использования, так что дайте волю своему воображению!

    Web Design Icon Pack - набор иконок от Flaticon

    Иллюстрирование блога о веб-дизайне никогда не было проще. С этой богатой коллекцией красочных иконок от Flaticon любой проект, связанный с веб-дизайном, будет выглядеть в десять раз лучше. Набор включает в себя рамки, инструменты и макеты пользовательского интерфейса. Доступны три цветовые версии для соответствия любому брендовому стилю и цветовой палитре.