4 способа добавить иконки на сайт из Figma - все плюсы и минусы
Vložit
- čas přidán 18. 01. 2022
- Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to/4100118065342340
Привет друзья!
Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.
В связи с этим я хочу расставить все точки над i в этой теме и рассказать достаточно подробно о том, как лучше всего добавлять иконки на сайт из макета Figma.
Способов хватает, и выбор конкретного способа зависит от самого проекта и дизайнера, который делал макет. Собственно об этом всём мы и поговорим!
Генерировать иконочный шрифт Icomoon: clck.ru/amF8G
========================================
avis-agency.ru - создание сайтов под ключ
rah-emil.ru - мой сайт и соц. сети
СПАСИБО бро❤
Спасибо за ролик! а какую программу используешь в этом видео?
спасибо за видео. Лайк)
спасибо очень полезное видео
Спасибо что ты существуешь
8:46…
Дя ля, как так постоянно получается, следуешь гайду, и всё не так, у меня даже svg код по-другому выглядит -_-
Как вставить SVG иконку таким образом чтобы можно было с ней взаимодействовать при наведении? Чтобы ее перекрасить при наведении, например.
А то fontawesome не сильно привлекает) Он удобнее для меня, но иконок подходящих иногда нет, в svg все есть..
Просто если через img вставлять или еще как цвет то не изменить емае, а прямо в код вставлять не очень приятно чет)
Вставляй как компонент
Хорошо что твое видео посмотрел, а то пошел бы пнг вставлять
10:48 я ораааал
Ну вообще у svg можно менять цвета при наведении например: для этого можно написать селектор
.icon:hover svg path {
stroke: “нужный цвет”
}
icon - это класс, элемента внутри которого лежит иконка, path это тэг внутри svg, иногда он может быть другим типа circle и т.д. Идём гуглить
Так что все работает.
Обычно я так и делаю, а для внешнего элемента задаю геометрию. Так что тут все просто
@@AVISTV можно и так. Это чаще при использовании фреймворков такой подход применим, но не всегда)
@@AVISTV это сильно помогает, на работе стало тоже частой задачей вставлять иконки, и уже думаю сделать либу)
Тоже пишу на Vue
Привет друг, Хочу спросить не снимешь видео? Как на свой сайт добавить систему личных сообщений!!!!!!!!!!!!!!!! с нуля аахахахахах шутка буду рад видео
Еще есть несколько способов, один из них svg sprite
@@AVISTV а fontawesome лютая херня?) Нет никакого стандарта к сожалению, который все используют?(
@@AVISTV спппасибо емае