Иконочный шрифт. Подключение Font Awesome. Создание иконочного шрифта из SVG файлов.
Иконочный шрифт, такой как 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
🤟 Живи, а работай в свободное время! ©
Пікірлер: 394
👻 Всех с праздником! 🎃 Полезно? 🤟 🔴 Получить доступ к плюшкам + поддержать канал: 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
@mrakcw
3 жыл бұрын
Жека красавчик)) Ты смотрел уже MDBootstrap? Жду от тебя видео об этом фремворке)) Туториал не нужно, просто интересно твое мнение
@Sergey-rn2hj
3 жыл бұрын
спс разобрался. пробовал в scss сразу в рабочем проекте, а там был миксин с дугими шрифтами который все перебивал. немного поколдовал и все заработало. только всеравно непонятно почему другие браузеры выводили иконку
@Mimokrorodil
Жыл бұрын
Спасибо! Великолепный урок!
Это просто нереально. Открыл для себя этот канал пару недель назад. Столько полезной информации, в таком удобном формате, нет нигде в интернете. Спасибо за работу!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Хорошо что есть такие люди, которые помогают другим!! Спасибо тебе большое, твои видео разборы не раз помогают)
Как всегда радуешь своим контентом! Приятно что не зацикливаешься на чем-то одном, а постоянно подкидываешь новое и новое! Спасибо огромное!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Я была уверена, что всё про это знаю, на всякий случай решила посмотреть. И, как всегда, узнала новое, неожиданное и полезное!
@FreelancerLifeStyle
3 жыл бұрын
Я рад!
Контент супер. Хоть и работаю давно с вёрсткой но в каждом уроке нахожу для себя что-то полезное и новое!
@FreelancerLifeStyle
3 жыл бұрын
Я рад!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
Прямо вселенная возможностей работы с иконочным шрифтом, еще и свои можно создавать! Супер!
Спасибо за доходчивое объяснение и интересный материал!За бесплатное скачивание платных иконок отдельный лайк!
Господи! Раньше мне приходилось через такие дебри подключать эти иконки... даже вспоминать страшно...) Четко, кратко, динамично, понятно. Приятное ощущение что каждая новая минута все больше вдохновляет и ты понимаешь насколько просто делать такие интересные вещи. Огромное спасибо, Женя, за Твое существование!)
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
@olezhonnv3215
3 жыл бұрын
А какие дебри? Я лет 10 назад генерил шрифты с иконками без проблем на похожем сервисе. Эта тема со шрифтами уже давно существует.
@alexandervoievodin6913
3 жыл бұрын
@@olezhonnv3215 я только начинающий. Отсутствие знаний обеспечивает мне более неудобные способы решения задачи. А на этом канале нахожу простые решения, о которых раньше не знал. Поэтому его и смотрю. Не спорю, для Вас это может быть известно уже давно, но не для меня.
Отличный сервис + отличное объяснение! Спасибо за экономию места в проектах))
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
О-бал-деть. Я в восторге. Свой иконный шрифт, это круто. Спасибо.
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Как демон появился из огня!)
@FreelancerLifeStyle
3 жыл бұрын
Ахах)
@margaretdevereaux8254
3 жыл бұрын
Ага, как раз в тему праздника! \/︶\/
После этого видео: Новая цель: Парсить все платные иконки с FontAwesome 😁
Спасибо Жека, крутой выпуск, сделал свой первый иконочный шрифт 😀
@FreelancerLifeStyle
3 жыл бұрын
Крутяк!
Как всегда, все понятно и хорошо изложено. Респект за качественный материал!
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Женя!! Спасибо!! Наконец-то я их подключила!!! Кого только не слушала и как только не извращалась ! Ты- волшебник! с тобой по моему хотению, по твоему велению все смогла!!
@FreelancerLifeStyle
3 жыл бұрын
Я рад!
Я совсем новичок в этом не простом деле(верстака), и уже не первый раз сталкиваюсь, во время тренировки и верстки какого-нибудь макета, со шрифтом awesome. И все никак не мог разобраться как его подключать. Спасибо огромное з ответ на мои мысленные вопросы") Подача материала, как обычно - на высоком уровне! ... чему уже не удивляюсь, смотря твой канал!
Очень полезная информация! Спасибо огромное за Ваши старания!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Женя! Огромное спасибо! У тебя один из самых лучших каналов в интернете! Спасибо за труд!
Женя, спасибо большое, выручаешь постоянно. Понятный полезный контент
Спасибо. Как всегда интересно и полезно
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Спасибо! Очень качественный контент и приятная подача.
Самый крутой и любимый препод!!! Спасибо, Жека 🤫🏆🏆🏆
Ого, только сейчас узнал о таких шрифтах. Спасибо за видио 👍
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Спасибо Евгений, как всегда ГОДНЫЙ КОНТЕНТ!!!)))
Большое спасибо! Хотелось бы видео про SVG (как с ним удобнее работать, какие инструменты использовать и т.п.), вы очень хорошо объясняете.
@FreelancerLifeStyle
3 жыл бұрын
Планирую сделать
Как всегда отлично. Спасибо, удачи
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Потрясающе! Спасибо и здоровья! )
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Жека!!! Как всегда, человеческое спасибо за годноту 👍
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Ооо, какая классная подача. Спасибо за видео!
Супер, полезная штука. Спасибо!
Сразу лайк!
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Клёво и понятно! Респект автору!
Клёво. Без воды и по теме.
Женя, спасибо за инструкцию!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Классная вещь. Почерпнул много полезного.
Надзвичайно корисний tutorial!
У меня просто нет слов, это очень годно !!!!!
Топ, реально круто объясняешь !
@FreelancerLifeStyle
3 жыл бұрын
Я рад!
О, отлично. Давно смотрел про этот набор иконок в другом месте. Потом они могли мне пригодится, но я напрочь забыл как они называются. Теперь вспомнил ))) Их удобно использовать в прототипах сайтов, как быстрое решение для визуализации примерного дизайна сайта.
@FreelancerLifeStyle
3 жыл бұрын
Согласен
Жека, как всегда годный контент!!! Спасибо!!!
Невероятно просто ) Спасибо )
Спасибо огромное за урок)
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
спасибо за урок, обязательно пригодится.
@FreelancerLifeStyle
3 жыл бұрын
Это 100%
Очень класный и полезный видос! спасибо.
Очень полезный видос!
Теперь я умею коммуниздить платные иконки ))
Спасибо за видео! Супер просто и супер интересно
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Спасибо за подробное видео)
Красавулька! Мега полезная инфа.
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Как всегда безупречный контент!
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Жека благодарю за твой труд!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Спасибо за подсказку!
Огонь!
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Спасибо огроменное за инфу!!! выкинул с сайта библиотеку fontawesome, создал свои иконки (надо то всего 5 штук для сайта), заодно PageSpeed вырос на 5 баллов))) Евгеша, буду очень признателен за гайд по верстке под LightHouse
Респектос, как всегда!)
Спасибо вам большое!
Огромное спасибо за видео!!!!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Маленькие изменения каждый день (прогресс в вёрстке) , спасибо Джеки чан))))
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Женя, привет! Огромная благодарность тебе, за все твои видео! Круто, качественно и доступно для понимания! Есть большая просьба к тебе. Сделай, пожалуйста, видео по Web Accessibility!!! Крайне мало информации на русском, а видео совсем нет. P.S. Ставьте лайк, кому будет это интересно;)
@FreelancerLifeStyle
3 жыл бұрын
Спасибо, такой видос в планах.
Просто топ, что еще сказать)
Спасибо, видео полезное. Я также один раз спиратил файл с анимацией движения планет для своего дипломного проекта, а то покупать не очень хотелось, у студентов всегда нету денег)
@FreelancerLifeStyle
3 жыл бұрын
Ахах)
Евгений, ты крутой, спасибо!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Крутяк!)
Класс!!!
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
спасибо большое за труд))
Спасибооооооо! Было очень полезно 👍👍👍
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Классный канал! Информативно и доступно для понимания! Почему зрение не бережёшь, без очков за мониторами... ай-яй-яй:) Береги себя!!!:)
Бомба! Спасибо
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Мощно) Я очень рад)
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Спасибо большое , очень хорошее видео, мне очень помогло!!!
Четкое появление)
Огромное спасибо за видео
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Круто!!!👏
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Мерси, очень полезная информация
спасибо большое брат, мне помогло!
Очень полезная информация.
@FreelancerLifeStyle
3 жыл бұрын
Я рад!
Жека как всегда крут! И лучший ! Препод))
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Друже, дякую за 2 речі: за круте відео з усіма дрібницями і за громадянську позицію🤝🤝🤝🤝🤝🤝
новый причесон) красава!
@FreelancerLifeStyle
3 жыл бұрын
Спасибо)
эх, найти бы такого специалиста по SPA/SSR. Спасибо Жека за ликбез
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
@olezhonnv3215
3 жыл бұрын
А зачем вам SSR в SPA? Вот же мода сегодня, лепить прям весь сайт на Реакте. А потом аххх, страдет СЕО, че делать. Давайте рендерить на сервере, а то робот Гугла видит один лишь рут дивчик пустой. Сайт - не совсем приложение, на мой взгляд. Можно приложение интегрировать внутрь сайта - редактор какой-то или конструктор чего-то там, например. Но делать сайт весь, как приложение - это современный накал идиотии, как по мне. Сайт должен быть на ПХП! Вордпресс! Ну, или Ларавел, УII на крайняк. Ну, или Пайтон (Руби, С#). А то лепят на JSе сайты и думают, шо делки! В бекенде JS - это дичь! Взяли моду, понимаешь! Еще и тайпскрипт расхайпили - тоже дичь, в квадрате!
@R.wsteady
3 жыл бұрын
@@olezhonnv3215 лично я исхожу из модных требований на рынке труда)
Спасибо, очень полезно)
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
*Лайк не глядя❤️*
@FreelancerLifeStyle
3 жыл бұрын
Спасибо! Тут есть на что посмотреть))
@blackking2296
3 жыл бұрын
@@FreelancerLifeStyle То же верно))
Жека красава!)
Круто)
Спасибо)) Сразу лайк
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Большое спасибо, я месяц назад пытался подключить, но ничего не получилось, плюнул и забил, а вы вот очень помогли)
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Сразу лайк, потом посмотрим)
@FreelancerLifeStyle
3 жыл бұрын
Я буду ждать!)
Спасибо урок, очень полезно. Недавно был опрос о чем делать уроки, я бы хотел ещё попросить уроки по дизайну, если это возможно, было бы очень полезно, а с твоим способом донесения информации ещё и интересно
мега-лучший!!!
Евгений это конечно череп!!! А рассказывает так, что просто сидишь и слушаешь. Думаете я что-то из этого ролика повторил? Да фиг там! Смотрел и восхищался!
@FreelancerLifeStyle
3 жыл бұрын
Ахах, спасибо!
Сразу огро-00000000000000000000мный лайк и во-0000000000000000 такой респект
Круто👍
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Спасибо большое !!!
Спасибо, молодец.
Красава, лайкос, уважуха !!!
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
+ ещё лайк
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Крутяк! Спасибо огромное за видео, очень полезно. ???
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
УРРРРРРААААААААААААА!!!!!!!!!!!!!!!!!))))))))))))) ЖЕКА, ТЫ МУЖЫЫЫЫК!!!!!!!!!
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!