Иконочный шрифт. Подключение 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
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

👻 Всех с праздником! 🎃 Полезно? 🤟 🔴 Получить доступ к плюшкам + поддержать канал: 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]

Жека красавчик)) Ты смотрел уже MDBootstrap? Жду от тебя видео об этом фремворке)) Туториал не нужно, просто интересно твое мнение

[@Sergey-rn2hj]

спс разобрался. пробовал в scss сразу в рабочем проекте, а там был миксин с дугими шрифтами который все перебивал. немного поколдовал и все заработало. только всеравно непонятно почему другие браузеры выводили иконку

[@Mimokrorodil]

Спасибо! Великолепный урок!

[@niiazovmaksat2591]

Это просто нереально. Открыл для себя этот канал пару недель назад. Столько полезной информации, в таком удобном формате, нет нигде в интернете. Спасибо за работу!

[@FreelancerLifeStyle]

Пожалуйста!

[@kokosik319]

Хорошо что есть такие люди, которые помогают другим!! Спасибо тебе большое, твои видео разборы не раз помогают)

[@alex-troshin]

Как всегда радуешь своим контентом! Приятно что не зацикливаешься на чем-то одном, а постоянно подкидываешь новое и новое! Спасибо огромное!

[@FreelancerLifeStyle]

Пожалуйста!

[@annamets]

Я была уверена, что всё про это знаю, на всякий случай решила посмотреть. И, как всегда, узнала новое, неожиданное и полезное!

[@FreelancerLifeStyle]

Я рад!

[@user-jk4fj6ke5n]

Контент супер. Хоть и работаю давно с вёрсткой но в каждом уроке нахожу для себя что-то полезное и новое!

[@FreelancerLifeStyle]

Я рад!

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!

[@stanislavafanasiev5766]

Прямо вселенная возможностей работы с иконочным шрифтом, еще и свои можно создавать! Супер!

[@nargizaliyeva9743]

Спасибо за доходчивое объяснение и интересный материал!За бесплатное скачивание платных иконок отдельный лайк!

[@alexandervoievodin6913]

Господи! Раньше мне приходилось через такие дебри подключать эти иконки... даже вспоминать страшно...) Четко, кратко, динамично, понятно. Приятное ощущение что каждая новая минута все больше вдохновляет и ты понимаешь насколько просто делать такие интересные вещи. Огромное спасибо, Женя, за Твое существование!)

[@FreelancerLifeStyle]

Пожалуйста!

[@olezhonnv3215]

А какие дебри? Я лет 10 назад генерил шрифты с иконками без проблем на похожем сервисе. Эта тема со шрифтами уже давно существует.

[@alexandervoievodin6913]

@@olezhonnv3215 я только начинающий. Отсутствие знаний обеспечивает мне более неудобные способы решения задачи. А на этом канале нахожу простые решения, о которых раньше не знал. Поэтому его и смотрю. Не спорю, для Вас это может быть известно уже давно, но не для меня.

[@delfinn]

Отличный сервис + отличное объяснение! Спасибо за экономию места в проектах))

[@FreelancerLifeStyle]

Пожалуйста!

[@arthurvolokhov1911]

О-бал-деть. Я в восторге. Свой иконный шрифт, это круто. Спасибо.

[@FreelancerLifeStyle]

Пожалуйста!

[@deniskotov]

Как демон появился из огня!)

[@FreelancerLifeStyle]

Ахах)

[@margaretdevereaux8254]

Ага, как раз в тему праздника! \/︶\/

[@zArMSn]

После этого видео: Новая цель: Парсить все платные иконки с FontAwesome 😁

[@no_way_back813]

Спасибо Жека, крутой выпуск, сделал свой первый иконочный шрифт 😀

[@FreelancerLifeStyle]

Крутяк!

[@user-kp6en8gi9t]

Как всегда, все понятно и хорошо изложено. Респект за качественный материал!

[@FreelancerLifeStyle]

Спасибо!

[@user-vg7nn3bl4u]

Женя!! Спасибо!! Наконец-то я их подключила!!! Кого только не слушала и как только не извращалась ! Ты- волшебник! с тобой по моему хотению, по твоему велению все смогла!!

[@FreelancerLifeStyle]

Я рад!

[@user-re7sx2fo2d]

Я совсем новичок в этом не простом деле(верстака), и уже не первый раз сталкиваюсь, во время тренировки и верстки какого-нибудь макета, со шрифтом awesome. И все никак не мог разобраться как его подключать. Спасибо огромное з ответ на мои мысленные вопросы") Подача материала, как обычно - на высоком уровне! ... чему уже не удивляюсь, смотря твой канал!

[@vyacheslavzabelskiy3745]

Очень полезная информация! Спасибо огромное за Ваши старания!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-sk7pk3jr6b]

Женя! Огромное спасибо! У тебя один из самых лучших каналов в интернете! Спасибо за труд!

[@nnnabbot]

Женя, спасибо большое, выручаешь постоянно. Понятный полезный контент

[@lastivka]

Спасибо. Как всегда интересно и полезно

[@FreelancerLifeStyle]

Пожалуйста!

[@andyanderson222]

Спасибо! Очень качественный контент и приятная подача.

[@helenlena2837]

Самый крутой и любимый препод!!! Спасибо, Жека 🤫🏆🏆🏆

[@vasya8696]

Ого, только сейчас узнал о таких шрифтах. Спасибо за видио 👍

[@FreelancerLifeStyle]

Пожалуйста!

[@duda_uaden8655]

Спасибо Евгений, как всегда ГОДНЫЙ КОНТЕНТ!!!)))

[@user-ft3yk5ec6k]

Большое спасибо! Хотелось бы видео про SVG (как с ним удобнее работать, какие инструменты использовать и т.п.), вы очень хорошо объясняете.

[@FreelancerLifeStyle]

Планирую сделать

[@user-go3cq9nz1b]

Как всегда отлично. Спасибо, удачи

[@FreelancerLifeStyle]

Спасибо!

[@dmitriyegorov4764]

Потрясающе! Спасибо и здоровья! )

[@FreelancerLifeStyle]

Пожалуйста!

[@Andrei_Porsev]

Жека!!! Как всегда, человеческое спасибо за годноту 👍

[@FreelancerLifeStyle]

Пожалуйста!

[@user-dr3rj3gt2b]

Ооо, какая классная подача. Спасибо за видео!

[@tercon8870]

Супер, полезная штука. Спасибо!

[@khalilmutallibov]

Сразу лайк!

[@FreelancerLifeStyle]

Спасибо!

[@zulagwido1309]

Клёво и понятно! Респект автору!

[@parahumanoid]

Клёво. Без воды и по теме.

[@user-vk1kb3xj6b]

Женя, спасибо за инструкцию!

[@FreelancerLifeStyle]

Пожалуйста!

[@MegaTesei]

Классная вещь. Почерпнул много полезного.

[@ruslangl2893]

Надзвичайно корисний tutorial!

[@skatler5741]

У меня просто нет слов, это очень годно !!!!!

[@xxxxxxxx5971]

Топ, реально круто объясняешь !

[@FreelancerLifeStyle]

Я рад!

[@phat80]

О, отлично. Давно смотрел про этот набор иконок в другом месте. Потом они могли мне пригодится, но я напрочь забыл как они называются. Теперь вспомнил ))) Их удобно использовать в прототипах сайтов, как быстрое решение для визуализации примерного дизайна сайта.

[@FreelancerLifeStyle]

Согласен

[@webdeveloper-group483]

Жека, как всегда годный контент!!! Спасибо!!!

[@ulfatkhalikov7400]

Невероятно просто ) Спасибо )

[@Timyr123msp]

Спасибо огромное за урок)

[@FreelancerLifeStyle]

Пожалуйста!

[@VitaliiMaevskii]

спасибо за урок, обязательно пригодится.

[@FreelancerLifeStyle]

Это 100%

[@SpaceQuiz24]

Очень класный и полезный видос! спасибо.

[@big_aim2006]

Очень полезный видос!

[@user-ri1ry7sx6p]

Теперь я умею коммуниздить платные иконки ))

[@a.osethkin55]

Спасибо за видео! Супер просто и супер интересно

[@FreelancerLifeStyle]

Пожалуйста!

[@kotbarsik9613]

Спасибо за подробное видео)

[@user-oe3un8ky6l]

Красавулька! Мега полезная инфа.

[@FreelancerLifeStyle]

Спасибо!

[@adwers6427]

Как всегда безупречный контент!

[@FreelancerLifeStyle]

Спасибо!

[@user-tl2lz1wv3p]

Жека благодарю за твой труд!

[@FreelancerLifeStyle]

Пожалуйста!

[@artnr7]

Спасибо за подсказку!

[@gromovdenis7]

Огонь!

[@FreelancerLifeStyle]

Спасибо!

[@user-uz2qh1wx9w]

Спасибо огроменное за инфу!!! выкинул с сайта библиотеку fontawesome, создал свои иконки (надо то всего 5 штук для сайта), заодно PageSpeed вырос на 5 баллов))) Евгеша, буду очень признателен за гайд по верстке под LightHouse

[@konstantinreut2577]

Респектос, как всегда!)

[@user-sd6kx7ri9g]

Спасибо вам большое!

[@ye5275]

Огромное спасибо за видео!!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@bq6677]

Маленькие изменения каждый день (прогресс в вёрстке) , спасибо Джеки чан))))

[@FreelancerLifeStyle]

Пожалуйста!

[@wewood6027]

Женя, привет! Огромная благодарность тебе, за все твои видео! Круто, качественно и доступно для понимания! Есть большая просьба к тебе. Сделай, пожалуйста, видео по Web Accessibility!!! Крайне мало информации на русском, а видео совсем нет. P.S. Ставьте лайк, кому будет это интересно;)

[@FreelancerLifeStyle]

Спасибо, такой видос в планах.

[@wildwildrift3784]

Просто топ, что еще сказать)

[@over1679]

Спасибо, видео полезное. Я также один раз спиратил файл с анимацией движения планет для своего дипломного проекта, а то покупать не очень хотелось, у студентов всегда нету денег)

[@FreelancerLifeStyle]

Ахах)

[@vladimirlevin6799]

Евгений, ты крутой, спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-wf4np1ne2c]

Крутяк!)

[@user-wy1qd5oi3v]

Класс!!!

[@FreelancerLifeStyle]

Спасибо!

[@user-ry2bi7eo6w]

спасибо большое за труд))

[@sanjarbarakayev638]

Спасибооооооо! Было очень полезно 👍👍👍

[@FreelancerLifeStyle]

Пожалуйста!

[@beyourself2458]

Классный канал! Информативно и доступно для понимания! Почему зрение не бережёшь, без очков за мониторами... ай-яй-яй:) Береги себя!!!:)

[@leonidboyko980]

Бомба! Спасибо

[@FreelancerLifeStyle]

Пожалуйста!

[@deniskotov]

Мощно) Я очень рад)

[@FreelancerLifeStyle]

Спасибо!

[@user-rt8tp5oq6b]

Спасибо большое , очень хорошее видео, мне очень помогло!!!

[@-Forever-Young-]

Четкое появление)

[@Kirdaro]

Огромное спасибо за видео

[@FreelancerLifeStyle]

Пожалуйста!

[@Qwertyqwerty-tq3we]

Круто!!!👏

[@FreelancerLifeStyle]

Спасибо!

[@mymail333g]

Мерси, очень полезная информация

[@usernout1516]

спасибо большое брат, мне помогло!

[@ivanryapolov7903]

Очень полезная информация.

[@FreelancerLifeStyle]

Я рад!

[@whatourlifeagame2487]

Жека как всегда крут! И лучший ! Препод))

[@FreelancerLifeStyle]

Спасибо!

[@incognitoperson5117]

Друже, дякую за 2 речі: за круте відео з усіма дрібницями і за громадянську позицію🤝🤝🤝🤝🤝🤝

[@vladislavozinkovskyi8276]

новый причесон) красава!

[@FreelancerLifeStyle]

Спасибо)

[@R.wsteady]

эх, найти бы такого специалиста по SPA/SSR. Спасибо Жека за ликбез

[@FreelancerLifeStyle]

Пожалуйста!

[@olezhonnv3215]

А зачем вам SSR в SPA? Вот же мода сегодня, лепить прям весь сайт на Реакте. А потом аххх, страдет СЕО, че делать. Давайте рендерить на сервере, а то робот Гугла видит один лишь рут дивчик пустой. Сайт - не совсем приложение, на мой взгляд. Можно приложение интегрировать внутрь сайта - редактор какой-то или конструктор чего-то там, например. Но делать сайт весь, как приложение - это современный накал идиотии, как по мне. Сайт должен быть на ПХП! Вордпресс! Ну, или Ларавел, УII на крайняк. Ну, или Пайтон (Руби, С#). А то лепят на JSе сайты и думают, шо делки! В бекенде JS - это дичь! Взяли моду, понимаешь! Еще и тайпскрипт расхайпили - тоже дичь, в квадрате!

[@R.wsteady]

@@olezhonnv3215 лично я исхожу из модных требований на рынке труда)

[@DeFace37]

Спасибо, очень полезно)

[@FreelancerLifeStyle]

Пожалуйста!

[@blackking2296]

*Лайк не глядя❤️*

[@FreelancerLifeStyle]

Спасибо! Тут есть на что посмотреть))

[@blackking2296]

@@FreelancerLifeStyle То же верно))

[@iligol3]

Жека красава!)

[@TheFastmind]

Круто)

[@it-learner5701]

Спасибо)) Сразу лайк

[@FreelancerLifeStyle]

Спасибо!

[@Dim172]

Большое спасибо, я месяц назад пытался подключить, но ничего не получилось, плюнул и забил, а вы вот очень помогли)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-si5jd9vf3d]

Сразу лайк, потом посмотрим)

[@FreelancerLifeStyle]

Я буду ждать!)

[@user-qi2ue9oh1i]

Спасибо урок, очень полезно. Недавно был опрос о чем делать уроки, я бы хотел ещё попросить уроки по дизайну, если это возможно, было бы очень полезно, а с твоим способом донесения информации ещё и интересно

[@user-pq6pb3ih2k]

мега-лучший!!!

[@svhanz]

Евгений это конечно череп!!! А рассказывает так, что просто сидишь и слушаешь. Думаете я что-то из этого ролика повторил? Да фиг там! Смотрел и восхищался!

[@FreelancerLifeStyle]

Ахах, спасибо!

[@ivanfedorov7934]

Сразу огро-00000000000000000000мный лайк и во-0000000000000000 такой респект

[@user-ov1sk3nh6z]

Круто👍

[@FreelancerLifeStyle]

Спасибо!

[@user-jq6tr6rr8v]

Спасибо большое !!!

[@smolmaxmaxi6633]

Спасибо, молодец.

[@bodfxua7698]

Красава, лайкос, уважуха !!!

[@FreelancerLifeStyle]

Спасибо!

[@ZimaTimofey]

+ ещё лайк

[@FreelancerLifeStyle]

Спасибо!

[@yuriismakota9574]

Крутяк! Спасибо огромное за видео, очень полезно. ???

[@FreelancerLifeStyle]

Пожалуйста!

[@deniskotov]

УРРРРРРААААААААААААА!!!!!!!!!!!!!!!!!))))))))))))) ЖЕКА, ТЫ МУЖЫЫЫЫК!!!!!!!!!

[@FreelancerLifeStyle]

Спасибо!