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