Тёмный

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

AVIS TV
Подписаться 10 тыс.
Просмотров 19 тыс.
50% 1

Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to/4100118065342340
Привет друзья!
Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.
В связи с этим я хочу расставить все точки над i в этой теме и рассказать достаточно подробно о том, как лучше всего добавлять иконки на сайт из макета Figma.
Способов хватает, и выбор конкретного способа зависит от самого проекта и дизайнера, который делал макет. Собственно об этом всём мы и поговорим!
Генерировать иконочный шрифт Icomoon: clck.ru/amF8G
========================================
avis-agency.ru - создание сайтов под ключ
rah-emil.ru - мой сайт и соц. сети

Опубликовано:

 

18 янв 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 17   
@nikitaermolenko7813
@nikitaermolenko7813 2 года назад
Как вставить SVG иконку таким образом чтобы можно было с ней взаимодействовать при наведении? Чтобы ее перекрасить при наведении, например. А то fontawesome не сильно привлекает) Он удобнее для меня, но иконок подходящих иногда нет, в svg все есть.. Просто если через img вставлять или еще как цвет то не изменить емае, а прямо в код вставлять не очень приятно чет)
@denchola
@denchola Год назад
Спасибо за ролик! а какую программу используешь в этом видео?
@user-dc5vv5pm3d
@user-dc5vv5pm3d 2 года назад
СПАСИБО бро❤
@Morke_Lyset
@Morke_Lyset 16 дней назад
Дя ля, как так постоянно получается, следуешь гайду, и всё не так, у меня даже svg код по-другому выглядит -_-
@user-xs8ty9dg5s
@user-xs8ty9dg5s Год назад
спасибо за видео. Лайк)
@sampforik3932
@sampforik3932 Год назад
Спасибо что ты существуешь
@boburmustafo8868
@boburmustafo8868 Год назад
спасибо очень полезное видео
@pihie
@pihie Год назад
8:46…
@t1nkereR
@t1nkereR 8 месяцев назад
10:48 я ораааал
@propust33
@propust33 Год назад
Хорошо что твое видео посмотрел, а то пошел бы пнг вставлять
@solevoy_king
@solevoy_king 2 года назад
Привет друг, Хочу спросить не снимешь видео? Как на свой сайт добавить систему личных сообщений!!!!!!!!!!!!!!!! с нуля аахахахахах шутка буду рад видео
@evgeniy_pashko
@evgeniy_pashko Год назад
Ну вообще у svg можно менять цвета при наведении например: для этого можно написать селектор .icon:hover svg path { stroke: “нужный цвет” } icon - это класс, элемента внутри которого лежит иконка, path это тэг внутри svg, иногда он может быть другим типа circle и т.д. Идём гуглить Так что все работает. Обычно я так и делаю, а для внешнего элемента задаю геометрию. Так что тут все просто
@evgeniy_pashko
@evgeniy_pashko Год назад
@@AVISTV можно и так. Это чаще при использовании фреймворков такой подход применим, но не всегда)
@evgeniy_pashko
@evgeniy_pashko Год назад
@@AVISTV это сильно помогает, на работе стало тоже частой задачей вставлять иконки, и уже думаю сделать либу) Тоже пишу на Vue
@kost7902
@kost7902 2 года назад
Еще есть несколько способов, один из них svg sprite
@nikitaermolenko7813
@nikitaermolenko7813 2 года назад
@@AVISTV а fontawesome лютая херня?) Нет никакого стандарта к сожалению, который все используют?(
@nikitaermolenko7813
@nikitaermolenko7813 2 года назад
@@AVISTV спппасибо емае
Далее