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, там также много полезного.
Удачи вам в ваших макетах и увидимся в следующих видео/статьях. Пока!
РЕГИСТРАЦИЯ НА RUTUBE | КАК СОЗДАТЬ КАНАЛ НА РУТУБ
Привет, дорогие подписчики и гости моего канала! Сегодня ,на повестке дня у нас такая тема «Регистрация на Rutube или, как создать канал на Рутуб» Досмотрите видео до конца и вы узнаете, как создать новый аккаунт ,на альтернативной ютубу платформе. На которой можно также пробовать свои силы и развиваться, создавая популярные видео ролики. И так, смотрим! ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ БОЛЬШЕ МОИХ ВИДОСОВ ЗДЕСЬ ? https://www.youtube.com/channel/UC9BTJ-lUQK1m5t788Maeydw ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ?МОЙ КАНАЛ НА RUTUBE-https://rutube.ru/channel/23613507/ ?МОЙ КАНАЛ НА ЯНДЕКС ДЗЕН- https://bit.ly/3uLFaHe ?МОЯ ГРУППА ВК- https://vk.com/green_yt_screen ?DONATION- https://money.yandex.ru/to/4100115715574663 ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ При создании видео ролика использовались программы: 1. Фотошоп (Photoshop СС 2019) 2. Sony Vegas Pro 16 3. Adobe Audition ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ #РУТУБ #RUTUBE #РЕГИСТРАЦИЯ #КАНАЛ #GREENYTSCREEN
Показать больше
Войдите , чтобы оставлять комментарии
Как сделать короткую ссылку на Rutube канал. Короткий адрес рутуб канала, URL — урл или юрл
На Rutube, можно сделать короткую ссылку на свой канал. В этом коротком видео, покажу как это сделать, а затем, можете продолжить свой заработок в интернете на Рутубе, естественно вам для этого нужно подключить монетизацию в рутуб. /описание ниже/ Мой канал рутуб — RUTUBE: https://rutube.ru/channel/23488286/ Мой Яндекс Дзен : https://zen.yandex.ru/id/5f356e2f05113f520202d498 Группа вконтакте: https://vk.com/victor.khristov.computers Мой канал ютуб: https://www.youtube.com/channel/UCnRYWhHeEkepLFjK2CdbTsw/featured Популярные видео: 1. Всё про Rutube : https://rutube.ru/plst/219884/ 2. STEAM : https://rutube.ru/plst/39307/ 3. QIWI : https://rutube.ru/plst/39241/ 4. Как получить галочку в Рутубе : https://rutube.ru/video/6319a9e5bdb38a302d36ca10751eb3ef/ 5. Смотрим ру, не работает канал Россия 24 : https://rutube.ru/video/f200ae65bb945d5cab7fbddcbbda9e10/ 6. RuStore vk приложение на телефон : https://rutube.ru/video/bce8487e8215a7c116bd351f02018ce9/ 7. NashStore приложение на телефон : https://rutube.ru/video/861d9e2a6a79ac42cef42d391c22d0d5/ 8. Как обновить приложение RuStore : https://rutube.ru/video/41fd12412a7d50dcb29dd761aee7fe3f/ 9. Как зарегистрироваться на сайте Смотрим : https://rutube.ru/video/a44af826eb3e65bbc7f0c5f90ffc4c4b/ 10. Про Монетизацию на рутубе : https://rutube.ru/video/2acfbe16f522d12ae1d9dc12d874cccd/ 11. Как установить приложение Смотрим ру на телефон : https://rutube.ru/video/5e6890f5f3da0f9a2bc85e596d1890f5/ На рутубе появилась возможность у официальных — верифицированных каналах, делать короткий адрес, короткий URL своего канала. Как сделать короткую ссылку на Rutube канал. Короткий адрес рутуб канала, урл или юрл #ВикторХристов #ИнтернетПолезный #рутуб #rutube #русскийютуб #блогеры #рутубканал #студиярутуб #рутубобновления #rutubeобновления #рутубобновление #rutubeобновление #рутубмонетизация #rutubeмонетизация #RuTubeStudio #Монетизация #дляблогеров #видеохостинг #какзаработатьвинтернете #интернетзароботок как, где, виктор христов, рутуб, rutube, рутуб канал, яндекс Дзен, rutube studio, студия рутуб, youtube, ютуб, ru tube, видеохостинг рутуб, продвижение рутуб, как заработать на rutube, рутюб, рутуб обновления, rutube обновления, заработок на rutube, рутуб монетизация, как заработать в интернете, заработок в интернете, продвижение rutube, rutub, rutube монетизация, Видеохостинг рутуб, рутуб продвижение видео, продвижение видео на рутубе, короткая ссылка на страницу, короткий адрес рутуб, как настроить рутуб, как настроить rutube, монетизация рутуб, рутуб заработок, как заработать в интернете, короткий адрес, сделать короткую ссылку, короткий урл, изменить короткий адресс, url, урл, как заработать в интернете без вложений, заработок в интернете 2022, рутуб монетизация 2022, rutube монетизация, короткий адрес рутуб, как сделать короткую ссылку на рутубе, короткая ссылка, юрл, адрес rutube канала,
Показать больше
Войдите , чтобы оставлять комментарии
Как Добавить Иконку на Сайт для Всех Устройств [WordPress]
Вы этом видео вы узнаете, как добавить иконку на сайт для всех устройств, как сделать фавикон на WordPress. Подробная статья на нашем сайте: https://ideavrabote.ru/sozdanie-sajta/kak-dobavit-ikonku-sajta Как Добавить Иконку Сайта. Сделать фавикон [Favicon на WordPress] Онлайн-видеокурс «Создание сайта 2021: с нуля до готового сайта» https://clck.ru/UvcRo + Поддержите меня, поставьте лайк и подпишитесь на канал ! Заходите на наш сайт: https://ideavrabote.ru/ ★Рекомендуем посмотреть★ ►Что такое утроенные теги в vidIQ для видео [Youtube] https://youtu.be/CoLtqPwrWbo ►Как Посмотреть Своих Подписчиков на Ютубе 2021 [Youtube] https://youtu.be/-eG3vPIHdw4 ►Как Посмотреть Все Свои Комментарии на Ютубе 2021 [Youtube] https://youtu.be/JopQ_EMgPJA ►Как Сделать Конечную Заставку для видео на Ютуб в 2021 [Youtube] https://youtu.be/ftcvChotewg #созданиесайта #сайты #создатьсайт #сайтснуля #программирование #сделатьсайт #сайт #КомпLive Возможно вы искали: как добавить иконку на вкладку сайта, как добавить иконку на сайт html, как добавить иконку сайта, как добавить фавикон, как сделать чтобы фавикон отображался в яндексе
Показать больше
Войдите , чтобы оставлять комментарии