Иконочный шрифт, такой как Font Awesome является мегакрутой и удобной штукой в современной верстке. Что бы вывести иконку нам достаточно добавить класс. А управлять иконками мы можем применяя все те же CSS свойства что и для обычного шрифта. Например, увеличивать размер, менять цвет, добавлять тень и т.д.. В этом выпуске мы научимся работать с популярным иконочным шрифтом Font Awesome, а также сделаем свой собственный иконочный шрифт из SVG файлов. Погнали! Итак Font Awesome - это, по сути, огромный набор всевозможных иконок который мы можем использовать в своем проекте. Тут есть как бесплатные иконки так и платные, которые конечно же круче. Но не переживайте, я покажу как их использовать в своем собственном наборе иконок. А пока, давайте научимся работать с бесплатным набором иконок. Но что если из набора нам нужны всего несколько иконок, а подключать приходится целый набор. Что если нам ну очень нужны пара иконок из платного набора? Что если мы хотим использовать свои иконки из конкретного макета а не набор Font Awesome? Все проблемы поможет решить создание собственного иконочного шрифта из SVG файлов. Погнали!
👉Font Awesome: fontawesome.com/
👉Просмотр SVG в проводнике: github.com/tibold/svg-explore...
👉Сервис создания иконочного шрифта IcoMoon: icomoon.io
🎃 Файлы урока: fls.guru/howtodoit/iconsfont.zip
Содержание:
00:00 - В выпуске
00:46 - Font Awesome. Подключение и настройка
06:55 - Собственный иконочный шрифт
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
7 июн 2024
