Загрузка страницы

Иконочный шрифт. Подключение Font Awesome. Создание иконочного шрифта из SVG файлов.

Иконочный шрифт, такой как Font Awesome является мегакрутой и удобной штукой в современной верстке. Что бы вывести иконку нам достаточно добавить класс. А управлять иконками мы можем применяя все те же CSS свойства что и для обычного шрифта. Например, увеличивать размер, менять цвет, добавлять тень и т.д.. В этом выпуске мы научимся работать с популярным иконочным шрифтом Font Awesome, а также сделаем свой собственный иконочный шрифт из SVG файлов. Погнали! Итак Font Awesome – это, по сути, огромный набор всевозможных иконок который мы можем использовать в своем проекте. Тут есть как бесплатные иконки так и платные, которые конечно же круче. Но не переживайте, я покажу как их использовать в своем собственном наборе иконок. А пока, давайте научимся работать с бесплатным набором иконок. Но что если из набора нам нужны всего несколько иконок, а подключать приходится целый набор. Что если нам ну очень нужны пара иконок из платного набора? Что если мы хотим использовать свои иконки из конкретного макета а не набор Font Awesome? Все проблемы поможет решить создание собственного иконочного шрифта из SVG файлов. Погнали!

👉Font Awesome: https://fontawesome.com/
👉Просмотр SVG в проводнике: https://github.com/tibold/svg-explorer-extension/releases
👉Сервис создания иконочного шрифта IcoMoon: https://icomoon.io

🎃 Файлы урока: https://fls.guru/howtodoit/iconsfont.zip

Содержание:
00:00 - В выпуске
00:46 - Font Awesome. Подключение и настройка
06:55 - Собственный иконочный шрифт

🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle

🤟 Живи, а работай в свободное время! ©

Видео Иконочный шрифт. Подключение Font Awesome. Создание иконочного шрифта из SVG файлов. канала Фрилансер по жизни - IT и фриланс
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
31 октября 2020 г. 12:00:57
00:15:24
Другие видео канала
Методология БЭМ за 17 минут. Пример верстки по БЭМ методологии // Фрилансер по жизниМетодология БЭМ за 17 минут. Пример верстки по БЭМ методологии // Фрилансер по жизниЧто лучше: иконочный шрифт или SVG / как вставить svg на сайт / иконочные шрифты для сайтаЧто лучше: иконочный шрифт или SVG / как вставить svg на сайт / иконочные шрифты для сайтаФорматы изображений в веб-разработке и виды графики сайта за 7 минут. + Создаем favicon.Форматы изображений в веб-разработке и виды графики сайта за 7 минут. + Создаем favicon.Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксинАдаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксинVS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучениеVS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучениеSetting up Font Awesome icons as pseudo-elementsSetting up Font Awesome icons as pseudo-elementsПодключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты // Фрилансер по жизниПодключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты // Фрилансер по жизниCSS transform. 2D и 3D трансформации translate, scale, rotate и другиеCSS transform. 2D и 3D трансформации translate, scale, rotate и другиеОсновы синтаксиса JAVASCRIPT. Структура кода. Инструкции. Режим use strict. Уроки JAVASCRIPT с нуля.Основы синтаксиса JAVASCRIPT. Структура кода. Инструкции. Режим use strict. Уроки JAVASCRIPT с нуля.Адаптивная HTML-верстка макета из Figma с подробным объяснением. Советы от профи. HTML SCSS GULP.Адаптивная HTML-верстка макета из Figma с подробным объяснением. Советы от профи. HTML SCSS GULP.Как создавать SVG спрайты? | SVG SpritesКак создавать SVG спрайты? | SVG SpritesВсе про CSS отступы padding и margin. Объяснение на практике за 33 минуты.Все про CSS отступы padding и margin. Объяснение на практике за 33 минуты.Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.Как можно добавить иконки на сайт. Иконочный шрифт из svg. Как подключить иконочный шрифт.Как можно добавить иконки на сайт. Иконочный шрифт из svg. Как подключить иконочный шрифт.Gulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтовGulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтовSLICK SLIDER - лучший слайдер для сайта за 1 час. Подробный гайд. Подключение и настройка слайдераSLICK SLIDER - лучший слайдер для сайта за 1 час. Подробный гайд. Подключение и настройка слайдераКак подключить и использовать Font Awesome 5Как подключить и использовать Font Awesome 5Смотрю ваши работы по верстке. Советы, позитивная критикаСмотрю ваши работы по верстке. Советы, позитивная критика
Яндекс.Метрика