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

Есть три способа включить Uicons в проект вашего веб-сайта: вы можете вставить их при помощи нашего CDN; загрузить их и получить полный пакет иконок во всех доступных форматах (SVG, CSS, файл шрифта и пример HTML); или установить их при помощи менеджера пакетов npm.

Использование Uicons через CDN

CDN – это самый быстрый способ добавить Uicons на вашу страницу. Вы можете скопировать и вставить ссылку в раздел HTML <head>, чтобы загрузить наш CSS, или использовать @import для вставки кода в ваш CSS.

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

Использование Uicons с помощью скачивания

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

Выберите иконку, которую хотите использовать, и нажмите на кнопку «Скачать», чтобы получить весь пакет иконок.

Использование Uicons при помощи менеджера пакетов npm

Установите последнюю версию Uicons, включающую все иконки в формате SVG, таблицы стилей CSS и файлы шрифтов, и легко обновите свой проект с помощью последних иконок и улучшений с менеджером пакетов npm.

npm i @flaticon/flaticon-uicons

Другими словами, с помощью этого метода вы получите тот же результат, что и со скачиваемыми форматами, но в более удобном для обновления пакете.
Более подробную информацию можно получить на странице репозитория.

Что находится в скачивании?

Каждый пакет стилей 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>

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

Толщина Уголок Префикс Пример Результат
Обычный Округлый fi-rr <i class="fi fi-rr-user"></i>
Жирный Округлый fi-br <i class="fi fi-br-user"></i>
Монолитный Округлый fi-sr <i class="fi fi-sr-user"></i>
Обычный Прямой fi-rs <i class="fi fi-rs-user"></i>
Жирный Прямой fi-bs <i class="fi fi-bs-user"></i>
Монолитный Прямой fi-ss <i class="fi fi-ss-user"></i>
Type Префикс Пример Результат
Бренды fi-rr <i class="fi fi-brands-instagram"></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
Маловероятно Весьма вероятно