Как пользоваться?

Выбери вес и угол

Скачать

Загружаемый файл включает значки в формате SVG, файлы шрифтов, CSS, необходимый для использования шрифта значка, и образец HTML.

Зарегистрироваться и скачать
Сеть доставки контента

Включи файл CSS в раздел <head> своего веб-сайта или через @import в своем CSS.

Зарегистрируйся и получи
Что находится в скачивании?

Каждый пакет стилей Uicons содержит следующие каталоги и файлы:

Файлы и папки Что означает
/css Таблицы стилей для веб-шрифтов
/svg Индивидуальный SVG для каждой иконки
/webfont Файлы веб-шрифтов, используемые с CSS
Использование веб-шрифтов с CSS

Файл /css/uicons-[your-style].css содержит основную стилизацию и все стили иконок, которые понадобятся тебе при использовании Uicons. Папка /webfonts содержит все файлы шрифтов, на которые ссылается вышеприведенный CSS и от которых он зависит.

Скопируй всю папку /webfonts и /css/uicons-[your-style].css в каталог статических активов твоего проекта (или туда, где ты предпочитаешь хранить интерфейсные активы или материалы поставщиков).

Добавь ссылку на скопированный файл /css/uicons-[your-style].css в <head> каждого шаблона или страницы, на которой ты хочешь использовать Uicons.

Замени uicons-[your-style].css именем скачанного тобой стиля.

то есть: uicons-rounded-outline.css

<head>
  <link href="/your-path-to-uicons/css/uicons-[your-style].css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fi fi-ro-user"></i>
  <i class="fi fi-ro-arrow-right"></i>
  <i class="fi fi-ro-book"></i>
  <i class="fi fi-ro-clean"></i>
</body>

Поскольку ты сам управляешь всеми скачанными файлами, убедись, что ссылки на твоих страницах <head> точно соответствуют тому, куда ты переместил все файлы Uicons в твоем проекте.

Использование нескольких стилей

Ты хочешь использовать более одного стиля? Для этого тебе нужно скачать каждый стиль, который ты хочешь использовать в своем проекте.

Uicons позволяет использовать два различных стиля уголка (закругленный и прямой) и три различные толщины (обычная, жирная и сплошная) для каждого из них.

Потом тебе нужно будет поместить все файлы в папки, как мы объяснили в предыдущем разделе, а затем добавить ссылку в раздел для каждого скачанного тобой стиля.

<head>
  <link href="/your-path-to-uicons/css/uicons-rounded-regular.css" rel="stylesheet">
  <link href="/your-path-to-uicons/css/uicons-rounded-bold.css" rel="stylesheet">
  <link href="/your-path-to-uicons/css/uicons-rounded-solid.css" rel="stylesheet">
</head>

Каждый стиль использует свой префикс, как мы можем видеть в следующей таблице:

Толщина Уголок Префикс Пример Результат
Regular Rounded fi-rr <i class="fi fi-rr-user"></i>
Bold Rounded fi-br <i class="fi fi-br-user"></i>
Solid Rounded fi-sr <i class="fi fi-sr-user"></i>
Regular Straight fi-rs <i class="fi fi-rs-user"></i>
Bold Straight fi-bs <i class="fi fi-bs-user"></i>
Solid Straight fi-ss <i class="fi fi-ss-user"></i>

Мы рекомендуем хранить папки /webfonts и /css в одном каталоге. Если ты этого не сделаешь, тебе нужно будет изменить путь к веб-шрифтам, упомянутым в CSS-файле каждого стиля.

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

Теперь, когда добавление ссылок завершено, ты можешь начать снабжать ссылками иконки в своих шаблонах или страницах.

<body>
  <i class="fi fi-rr-user"></i>
  <i class="fi fi-br-arrow-right"></i>
  <i class="fi fi-sr-book"></i>
  <i class="fi fi-rr-clean"></i>
</body>
Краткое описание лицензии

Наша лицензия позволяет вам использовать контент:

  • Для коммерческих и личных проектов
  • В цифровых или печатных медиа
  • Неограниченное количество раз и бессрочно
  • В любой точке мира
  • Для создания модификаций и производных работ

Этот текст является сводкой и служит только для информации. Он не представляет собой никаких договорных обязательств. Для получения дополнительной информации, пожалуйста, ознакомься с нашими Условиями использования перед использованием материалов

Как ссылаться на авторство?

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

Скопируй эту ссылку и вставь ее туда, где она видна, рядом с тем местом, где ты используешь материал. Если это невозможно, размести ее в нижнем колонтитуле твоего сайта, блога или новостной рассылки или в разделе с авторами.

Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a>

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

bold regular solid rounded straight

Насколько вероятно, что ты порекомендуешь Flaticon другу?

0 1 2 3 4 5 6 7 8 9 10
Маловероятно Весьма вероятно