Начать
Как использовать Uicons?
Есть три способа включить Uicons в проект вашего веб-сайта: вы можете вставить их при помощи нашего CDN; загрузить их и получить полный пакет иконок во всех доступных форматах (SVG, CSS, файл шрифта и пример HTML); или установить их при помощи менеджера пакетов npm.
Использование Uicons через CDN
Latest version: 2.6.0
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 именем скачанного тобой стиля.
i.e: 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-square-right"></i>
<i class="fi fi-ro-arrow-right"></i>
<i class="fi fi-ro-book"></i>
<i class="fi fi-ro-broom"></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-square-right"></i> |
|
| Жирный | Округлый | fi-br | <i class="fi fi-br-square-right"></i> |
|
| Монолитный | Округлый | fi-sr | <i class="fi fi-sr-square-right"></i> |
|
| Тонкий | Округлый | fi-tr | <i class="fi fi-tr-square-right"></i> |
|
| Обычный | Прямой | fi-rs | <i class="fi fi-rs-square-right"></i> |
|
| Жирный | Прямой | fi-bs | <i class="fi fi-bs-square-right"></i> |
|
| Монолитный | Прямой | fi-ss | <i class="fi fi-ss-square-right"></i> |
|
| Тонкий | Прямой | fi-ts | <i class="fi fi-ts-square-right"></i> |
|
| Type | Префикс | Пример | Результат |
|---|---|---|---|
| Бренды | fi-rr | <i class="fi fi-brands-instagram"></i> |
|
Мы рекомендуем хранить папки /webfonts и /css в одном каталоге. Если ты этого не сделаешь, тебе нужно будет изменить путь к веб-шрифтам, упомянутым в CSS-файле каждого стиля.
Использование иконок
Теперь, когда добавление ссылок завершено, ты можешь начать снабжать ссылками иконки в своих шаблонах или страницах.
<body>
<i class="fi fi-rr-square-right"></i>
<i class="fi fi-br-arrow-right"></i>
<i class="fi fi-sr-book"></i>
<i class="fi fi-rr-broom"></i>
</body>
Краткое описание лицензии
Наша лицензия позволяет вам использовать контент:
- Для коммерческих и личных проектов
- В цифровых или печатных медиа
- Неограниченное количество раз и бессрочно
- Anywhere in the world
- To make modifications and derived works
Этот текст является сводкой и служит только для информации. Он не представляет собой никаких договорных обязательств. Для получения дополнительной информации, пожалуйста, ознакомься с нашими Условиями использования перед использованием материалов
Как ссылаться на авторство?
Создание качественных иконок требует много времени и усилий. Мы просим вас только добавить небольшую ссылку с указанием авторства. Выберите среду, в которой вы собираетесь использовать ресурс.
Скопируй эту ссылку и вставь ее туда, где она видна, рядом с тем местом, где ты используешь материал. Если это невозможно, размести ее в нижнем колонтитуле твоего сайта, блога или новостной рассылки или в разделе с авторами.
If you have any other questions, please check the FAQ section