Иконочный шрифт. Подключение Font Awesome. Создание иконочного шрифта из SVG файлов.
HTML-код
- Опубликовано: 1 июл 2024
- Иконочный шрифт, такой как 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
🤟 Живи, а работай в свободное время! ©
![Уроки Figma | Пуленепробиваемые иконки. [Фигма]](/img/1.gif)
👻 Всех с праздником! 🎃 Полезно? 🤟
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Жека красавчик))
Ты смотрел уже MDBootstrap?
Жду от тебя видео об этом фремворке))
Туториал не нужно, просто интересно твое мнение
спс разобрался.
пробовал в scss сразу в рабочем проекте, а там был миксин с дугими шрифтами который все перебивал.
немного поколдовал и все заработало.
только всеравно непонятно почему другие браузеры выводили иконку
Спасибо! Великолепный урок!
Это просто нереально. Открыл для себя этот канал пару недель назад. Столько полезной информации, в таком удобном формате, нет нигде в интернете. Спасибо за работу!
Пожалуйста!
Хорошо что есть такие люди, которые помогают другим!! Спасибо тебе большое, твои видео разборы не раз помогают)
Как всегда радуешь своим контентом!
Приятно что не зацикливаешься на чем-то одном, а постоянно подкидываешь новое и новое!
Спасибо огромное!
Пожалуйста!
Спасибо за доходчивое объяснение и интересный материал!За бесплатное скачивание платных иконок отдельный лайк!
Прямо вселенная возможностей работы с иконочным шрифтом, еще и свои можно создавать! Супер!
Контент супер. Хоть и работаю давно с вёрсткой но в каждом уроке нахожу для себя что-то полезное и новое!
Я рад!
Отличный сервис + отличное объяснение! Спасибо за экономию места в проектах))
Пожалуйста!
Женя! Огромное спасибо! У тебя один из самых лучших каналов в интернете! Спасибо за труд!
Я была уверена, что всё про это знаю, на всякий случай решила посмотреть. И, как всегда, узнала новое, неожиданное и полезное!
Я рад!
Спасибо Евгений, как всегда ГОДНЫЙ КОНТЕНТ!!!)))
О-бал-деть. Я в восторге. Свой иконный шрифт, это круто. Спасибо.
Пожалуйста!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
Спасибо Жека, крутой выпуск, сделал свой первый иконочный шрифт 😀
Крутяк!
Как всегда, все понятно и хорошо изложено. Респект за качественный материал!
Спасибо!
Женя, спасибо большое, выручаешь постоянно. Понятный полезный контент
Жека!!! Как всегда, человеческое спасибо за годноту 👍
Пожалуйста!
Очень полезная информация! Спасибо огромное за Ваши старания!
Пожалуйста!
Женя!! Спасибо!! Наконец-то я их подключила!!! Кого только не слушала и как только не извращалась ! Ты- волшебник! с тобой по моему хотению, по твоему велению все смогла!!
Я рад!
Самый крутой и любимый препод!!! Спасибо, Жека 🤫🏆🏆🏆
Спасибо! Очень качественный контент и приятная подача.
Потрясающе! Спасибо и здоровья! )
Пожалуйста!
Ооо, какая классная подача. Спасибо за видео!
Спасибо. Как всегда интересно и полезно
Пожалуйста!
Сразу лайк!
Спасибо!
Большое спасибо! Хотелось бы видео про SVG (как с ним удобнее работать, какие инструменты использовать и т.п.), вы очень хорошо объясняете.
Планирую сделать
Клёво и понятно! Респект автору!
Женя, спасибо за инструкцию!
Пожалуйста!
Я совсем новичок в этом не простом деле(верстака), и уже не первый раз сталкиваюсь, во время тренировки и верстки какого-нибудь макета, со шрифтом awesome. И все никак не мог разобраться как его подключать.
Спасибо огромное з ответ на мои мысленные вопросы")
Подача материала, как обычно - на высоком уровне! ... чему уже не удивляюсь, смотря твой канал!
У меня просто нет слов, это очень годно !!!!!
Как всегда отлично. Спасибо, удачи
Спасибо!
Ого, только сейчас узнал о таких шрифтах. Спасибо за видио 👍
Пожалуйста!
Клёво. Без воды и по теме.
Жека, как всегда годный контент!!! Спасибо!!!
Классная вещь. Почерпнул много полезного.
Супер, полезная штука. Спасибо!
Топ, реально круто объясняешь !
Я рад!
Очень полезный видос!
Как всегда безупречный контент!
Спасибо!
После этого видео:
Новая цель:
Парсить все платные иконки с FontAwesome 😁
Господи! Раньше мне приходилось через такие дебри подключать эти иконки... даже вспоминать страшно...)
Четко, кратко, динамично, понятно. Приятное ощущение что каждая новая минута все больше вдохновляет и ты понимаешь насколько просто делать такие интересные вещи.
Огромное спасибо, Женя, за Твое существование!)
Пожалуйста!
А какие дебри? Я лет 10 назад генерил шрифты с иконками без проблем на похожем сервисе. Эта тема со шрифтами уже давно существует.
@@olezhonnv3215 я только начинающий. Отсутствие знаний обеспечивает мне более неудобные способы решения задачи. А на этом канале нахожу простые решения, о которых раньше не знал. Поэтому его и смотрю. Не спорю, для Вас это может быть известно уже давно, но не для меня.
Невероятно просто ) Спасибо )
Спасибо огромное за урок)
Пожалуйста!
Красавулька! Мега полезная инфа.
Спасибо!
Как демон появился из огня!)
Ахах)
Ага, как раз в тему праздника! \/︶\/
Жека благодарю за твой труд!
Пожалуйста!
*Лайк не глядя❤️*
Спасибо! Тут есть на что посмотреть))
@@FreelancerLifeStyle То же верно))
Огонь!
Спасибо!
Очень класный и полезный видос! спасибо.
О, отлично. Давно смотрел про этот набор иконок в другом месте. Потом они могли мне пригодится, но я напрочь забыл как они называются. Теперь вспомнил ))) Их удобно использовать в прототипах сайтов, как быстрое решение для визуализации примерного дизайна сайта.
Согласен
Респектос, как всегда!)
Спасибо за подробное видео)
спасибо за урок, обязательно пригодится.
Это 100%
Спасибо вам большое!
Четкое появление)
Мощно) Я очень рад)
Спасибо!
Женя, привет! Огромная благодарность тебе, за все твои видео! Круто, качественно и доступно для понимания! Есть большая просьба к тебе. Сделай, пожалуйста, видео по Web Accessibility!!! Крайне мало информации на русском, а видео совсем нет. P.S. Ставьте лайк, кому будет это интересно;)
Спасибо, такой видос в планах.
Спасибо за подсказку!
Спасибо за видео! Супер просто и супер интересно
Пожалуйста!
Просто топ, что еще сказать)
Маленькие изменения каждый день (прогресс в вёрстке) , спасибо Джеки чан))))
Пожалуйста!
Евгений, ты крутой, спасибо!
Пожалуйста!
Надзвичайно корисний tutorial!
новый причесон)
красава!
Спасибо)
Классный канал! Информативно и доступно для понимания!
Почему зрение не бережёшь, без очков за мониторами... ай-яй-яй:)
Береги себя!!!:)
Жека как всегда крут! И лучший ! Препод))
Спасибо!
Огромное спасибо за видео!!!!
Пожалуйста!
Класс!!!
Спасибо!
Круто!!!👏
Спасибо!
Крутяк!)
Жека красава!)
Спасибооооооо! Было очень полезно 👍👍👍
Пожалуйста!
Бомба! Спасибо
Пожалуйста!
спасибо большое брат, мне помогло!
Очень полезная информация.
Я рад!
Спасибо огроменное за инфу!!! выкинул с сайта библиотеку fontawesome, создал свои иконки (надо то всего 5 штук для сайта), заодно PageSpeed вырос на 5 баллов))) Евгеша, буду очень признателен за гайд по верстке под LightHouse
спасибо большое за труд))
Спасибо большое , очень хорошее видео, мне очень помогло!!!
Огромное спасибо за видео
Пожалуйста!
Спасибо, видео полезное. Я также один раз спиратил файл с анимацией движения планет для своего дипломного проекта, а то покупать не очень хотелось, у студентов всегда нету денег)
Ахах)
Теперь я умею коммуниздить платные иконки ))
Сразу огро-00000000000000000000мный лайк и во-0000000000000000 такой респект
Мерси, очень полезная информация
эх, найти бы такого специалиста по SPA/SSR. Спасибо Жека за ликбез
Пожалуйста!
А зачем вам SSR в SPA?
Вот же мода сегодня, лепить прям весь сайт на Реакте. А потом аххх, страдет СЕО, че делать. Давайте рендерить на сервере, а то робот Гугла видит один лишь рут дивчик пустой.
Сайт - не совсем приложение, на мой взгляд. Можно приложение интегрировать внутрь сайта - редактор какой-то или конструктор чего-то там, например. Но делать сайт весь, как приложение - это современный накал идиотии, как по мне.
Сайт должен быть на ПХП! Вордпресс! Ну, или Ларавел, УII на крайняк. Ну, или Пайтон (Руби, С#).
А то лепят на JSе сайты и думают, шо делки! В бекенде JS - это дичь! Взяли моду, понимаешь! Еще и тайпскрипт расхайпили - тоже дичь, в квадрате!
@@olezhonnv3215 лично я исхожу из модных требований на рынке труда)
мега-лучший!!!
УРРРРРРААААААААААААА!!!!!!!!!!!!!!!!!))))))))))))) ЖЕКА, ТЫ МУЖЫЫЫЫК!!!!!!!!!
Спасибо!
Круто)
Сразу лайк, потом посмотрим)
Я буду ждать!)
Спасибо)) Сразу лайк
Спасибо!
Большое спасибо, я месяц назад пытался подключить, но ничего не получилось, плюнул и забил, а вы вот очень помогли)
Пожалуйста!
Круто👍
Спасибо!
Красава, лайкос, уважуха !!!
Спасибо!
Спасибо, очень полезно)
Пожалуйста!
You are awesome👍
Tnx)
реально крутяк )
Спасибо!
Спасибо большое !!!
Супер
Спасибо!
Евгений это конечно череп!!! А рассказывает так, что просто сидишь и слушаешь. Думаете я что-то из этого ролика повторил? Да фиг там! Смотрел и восхищался!
Ахах, спасибо!
Дядь Жека, +Лайк 👍
Спасибо!
Спасибо урок, очень полезно. Недавно был опрос о чем делать уроки, я бы хотел ещё попросить уроки по дизайну, если это возможно, было бы очень полезно, а с твоим способом донесения информации ещё и интересно