Flaticon как добавлять иконки на сайт

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

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

  href="/your-path-to-uicons/css/uicons-[your-style].css" rel="stylesheet">  class="fi fi-ro-square-right">  class="fi fi-ro-arrow-right">  class="fi fi-ro-book">  class="fi fi-ro-broom"> 

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

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

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

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

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

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

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

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

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

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

  class="fi fi-rr-square-right">  class="fi fi-br-arrow-right">  class="fi fi-sr-book">  class="fi fi-rr-broom"> 

Краткое описание лицензии

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

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

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

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

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

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

Uicons by Flaticon Translation Скопировано!

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

Получи доступ к 13.5M+ векторных иконок и стикеров

Скачивай бесплатные иконки и стикеры для своих проектов. Ресурсы, созданные дизайнерами для дизайнеров. Форматы PNG, SVG, EPS, PSD и CSS.

Иконки

Самая большая база бесплатных иконок для любого проекта.

Значки интерфейса

Иконки, специально разработанные для ваших интерфейсов.

Анимированные Иконки

Движущиеся иконки для создания потрясающих проектов.

Стикеры

Стикеры для сайтов, приложений или любого места, где они вам нужны

Самые популярные иконки для пользовательского интерфейса в формате SVG бесплатно

+23,000 бесплатных иконок для пользовательского интерфейса в 9 разных стилях. Вы можете отредактировать и настроить их на свой лад, чтобы они стали по-настоящему Вашими

Популярные иконки

stationery and office icon set
Кол-во иконок: 50

Кол-во иконок: 20

Кол-во иконок: 50

venetian carnival
Кол-во иконок: 50

Лучшие стикеры

Количество стикеров: 20

Количество стикеров: 20

Количество стикеров: 20

Количество стикеров: 20

Шрифты-значки для любого проекта, большого или маленького

+23,000векторных иконок, оптимальных для SVG и веб-шрифта, для веб-приложений и приложений для iOS и Android.

Инструменты, которые помогут сделать вашу работу более профессиональной

Бесплатные аксессуары, которые позволят вам организовать свои дизайнерские творения и создавать их, экономя при этом время

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

Отредактируйте цвет своих иконок, измените размер и скачайте их во всех форматах: SVG, PNG, EPS. Посмотреть еще

Используйте иконки в Google Документах и Презентациях легко, быстро и бесплатно. Посмотреть еще

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

Отредактируйте цвет своих иконок, измените размер и скачайте их во всех форматах: SVG, PNG, EPS. Посмотреть еще

Используйте иконки в Google Документах и Презентациях легко, быстро и бесплатно. Посмотреть еще

Создавайте эффектные изображения для своих историй в Instagram, заголовков в Facebook, презентаций, блогов или веб-сайтов. Посмотреть еще

Что нового в Flaticon

Узнайте о последних обновлениях сайта, новых функциях и инструментах и извлеките максимум пользы из работы с Flaticon.

Новый плагин Figma с форматом SVG здесь

Упрощенный пользовательский интерфейс

Сортируйте ресурсы по стилю и быстро находите подходящие вам иконки

Добавьте иконки в Figma быстрее

Новый плагин Figma уже здесь, который перенесет миллионы векторных иконок прямо на ваш холст.

Flaticon как добавлять иконки на сайт

У вас еще нет коллекций

Здесь представлены все коллекции

Что я могу делать со своими коллекциями?

• Добавить иконки

Нажмите на любую иконку, которую хотите добавить в коллекцию.

Организуйте свои коллекции по проектам. Добавляйте, удаляйте, редактируйте и переименовывайте иконки.

Воспользуйтесь функцией «Коллекция красок» и измените цвет всей коллекции или сделайте это постепенно, изменяя иконку за иконкой

Загрузите свои коллекции в формате кода, совместимом со всеми браузерами, и используйте иконки на своем веб-сайте.

4 способа добавить иконки на сайт из Figma — все плюсы и минусы

Поговорим о том, КАК ДОБАВИТЬ ИКОНКИ НА САЙТ ИЗ FIGMA. Для тех, кому интереснее смотреть видео, прикрепляю свой видосик на YouTube:

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.

В связи с этим я хочу расставить все точки над i в этой теме и рассказать достаточно подробно о том, как лучше всего добавлять иконки на сайт из макета Figma.

Способов хватает, и выбор конкретного способа зависит от самого проекта и дизайнера, который делал макет. Собственно об этом всём мы и поговорим!

Способ №1 — это экспортировать иконки в svg формат и вставлять их либо как код, либо как изображение, либо как CSS свойство.

Сосбтвенно, выделяем иконку в Figma и жмём на экспорт в SVG формат, сохраняем в наш проект и вставляем на сайт:

Сам по себе вариант самый очевидный, простой и достаточно хороший.

Однако тут у нас выступает 2 очень неприятные проблемы.

Первая проблема — если мы используем svg код, то сам код становится достаточно большим так как сама иконка может быть очень сложной по цветам и количеству вектора внутри.

Вторая проблема — это если мы подключаем иконку таким способом, то нам проблематично менять её цвет через CSS или даже JS. Придётся экспортировать дубль иконки, но с другим цветом. А в случае с тегом object у нас вообще не будет нормально работать ссылка, если мы обернули её в тег .

Есть также ещё небольшой минус — он связан с тем, что мы не можем задать размер иконки через свойство font-size (то есть мы не наследуем размер шрифта). Приходится всё время «играться» с шириной и высотой.

Из плюсов, пожалуй, только то, что вариант простой и экономит немного времени в небольших проектах.

Поэтому этот вариант на самом деле подходит тогда, когда иконок в макете не много (то есть максимум штук 3-5) и их цвета нигде не меняются (к примеру по наведению или теме макета).

Способ №2 — это создать 1 файл со всеми иконками. По-другому это называют текстура иконок.

Вариант также подразумевает экспорт иконок в svg или png формат, но одним файлом, где будут все иконки одного размера. Это довольно старый вариант, но знать о нём нужно. Я точно знаю, что ВКонтакте использовали этот способ очень долго, и после редизайна они отказались от этого способа в пользу SVG + JS.

К примеру, иконки соц. сетей:

Прописываем код для иконки ВК и Instagram:

  .icon < position: relative; display: inline-block; width: 40px; height: 40px; background-image: url('img/socials-pack.svg'); background-size: 287px; background-repeat: no-repeat; >.icon_vk < /* начальная позиция стоит по-умолчанию */ >.icon_instagram 

Тут у нас выступает 2 проблемы:

Первая — у нас может занять много времени подготовка CSS свойств.

Вторая — опять очень проблематично менять цвета. Придётся экспортировать столько дублей иконок, сколько нужно цветов.

Зато тут есть 1 приятный плюс — это небольшой HTML код, так как мы используем только класс, чтобы добавить иконку.

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

Способ №3 — использовать готовый сервис иконок. Тут вам важно уточнить у дизайнера — ОТКУДА ВЗЯТЫ ИКОНКИ.

Небольшое отступление — вам в принципе нужно всегда спрашивать у дизайнера: какие иконки, откуда изображения, где взять шрифт и т.п. вопросы.

Часто бывает такое, что иконки взяты с какого-то сервиса, который позволяет подключить иконки через стили или скрипты.

В Figma дизайнеры часто используют сервис Iconify.

Либо дизайнер мог использовать другие иконки, где есть готовое подключение на сайт. Тот же EvaIcons, к примеру.

Пример подключения через Iconify:

Тут я уже начну с плюсов:

• во-первых, мы можем очень легко и быстро подключить все иконки на сайт
• во-вторых, цвет иконки меняется очень просто по свойству color в css
• в-третьих, размер иконки наследуется от шрифта и мы можем его менять по свойству font-size
• да и в целом в нашем html коде всё аккуратно, иконки занимают 1 строку

Из минусов, пожалуй, только то, что мы подключаем сторонний сервис/библиотеку, и вместе с этим много лишнего кода. Но это мелочь, особенно если дедлайн проекта горит.

Этот вариант следует использовать, если иконок в макете больше 5 и их цвета не нигде не меняются.

Способ №4 — это самостоятельно превратить все иконки в иконочный шрифт

В этом случае вам не повезло, потому что дизайнер использовал иконки, для которых нет никакого решения для подключения на сайт (вот подлец��).

Что мы делаем:

• мы экспортируем все иконки в svg формат (будет лучше, если все они будут чёрные, латиницой без символов и слова «icon»)
• импортируем их в сервис icomoon (чтобы сэкономить кучу времени). Тут важно, чтобы у вас все иконки были в кривых (fill), а не обводкой (stroke). Сервис не работает с обводкой, и он вас предупредит, если какая-то иконка будет сделана обводкой
• генерируем иконочный шрифт и получаем готовый CSS файл и превьюшку с иконками

 или в файле стилей -->   Кнопка с иконкой .button:before 

Из плюсов я выделю:

• возможность легко менять цвет через CSS свойтсво color
• возможность задавать размер иконки через font-size (то есть иконка наследует размеры щрифта)
• небольшой html-код, так как мы используем только 1 небольшой класс для добавления иконки
• простая поддержка иконок (легко добавлять и удалять иконки из нашего арсенала)
• экономим пространство тем, что у нас находятся только те иконки и код, которые нужны (в отличии от использования готового решения, где может быть больше сотни иконок)

Из минусов:

• мы тратим немного больше времени на подготовку иконочного шрифта
• нам важно следить, чтобы иконки были в кривых, а не обводочными

Данный вариант подходит, когда иконок в макете много и когда их цвета могут меняться.

Заключение

Друзья! Поверьте, этого всего вам достаточно, чтобы научиться правильно и без проблем подключать любые иконки на любой сайт. Ведь сами понимаете, как важно, чтобы html-макет соответствовал макету в Figma, при это без ущерба производительности и качеству кода.

Пишите в комментариях — что вы думаете по этому поводу.

Не забывайте подписываться на меня в YouTube, там также много полезного.

Удачи вам в ваших макетах и увидимся в следующих видео/статьях. Пока!