Как можно добавить иконки на сайт. Иконочный шрифт из svg. Как подключить иконочный шрифт.

Подписаться 47 тыс.

Просмотров 34 тыс.

50% 1

Как можно добавить иконки на сайт. Иконочный шрифт из svg. Как подключить иконочный шрифт.
Здравствуйте. В этом видео я расскажу как вставить иконку на сайт. Существует множество способов как установить иконку на сайт. Если кто не знает, можно исользовать иконки для меню сайта. Чтоб вставить иконку нам нужны коды иконок для сайта. Для этого существуют иконочные шрифты для сайта. Найти иконочный шрифт font awesome можно на одноименном сайте. Можно использовать svg иконки для сайта. Или преобразованный иконочный шрифт из svg или sprite картинки. Я покажу способы как подключить иконочный шрифт. Если у вас нет своих изображений в видео я рассказываю где можно найти сайт значки иконки. Там же можно иконочный шрифт скачать. Так же существует сервис генератор иконок для сайта, но он нем в другой раз.
=======================================
Ссылки на ресурсы из видео:
Готовый набор иконок - fontawesome.com/
Генерация шрифта - icomoon.io/
Генерация спрайта - iconizr.com/

Опубликовано:

9 апр 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 69

@prosto_razrabotka 3 года назад

Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

@maksimtroshkov173 4 года назад

Как по мне, выпуск получился немного сумбурным. Видно, что хотелось все и сразу показать, но лично у меня после просмотра каша в голове, т.к. до этого с svg не работал. Возможно стоило как-то разбить видео на несколько логических частей и чуть подробней пояснить обо всем. За показанные ресурсы спасибо! Всегда пригодится.

@TheTexPro 4 года назад

Спасибо! Очень познавательно!

@lemmonardo1860 3 года назад

Спасибо большое , думал что уже никогда не пойму эту тему , оказалось все что нужно- хороший учитель )

@kirillgolovanov2975 4 года назад

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

@prosto_razrabotka 4 года назад

Благодарю.

@alexdomanskyi7301 3 года назад

Кроме знаний заряд позитива)

@user-pn2ev2je2l 4 года назад

Благодарю Вас за видео.

@user-xl9bm9wf8h 4 года назад

Обожаю вашу подачу инфы. Спасибо!

@prosto_razrabotka 4 года назад

Приятно слышать)

@gyros9162 4 года назад

Спасибо! С помощью этого видео я вставил иконки в подвал прошлого лендинга!

@NetSergio 3 года назад

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

@RomanSimonenko 2 года назад

Браво! Коротко и все по существу!

@nikbraun5013 3 года назад

Большое человеческое спасибо

@alexandrkhristenko5723 2 месяца назад

Спасибо, помог разобраться

@sergeyshovkoplyas2206 4 года назад

Спасибо тебе огромное за видос! Все по полочкам разложил

@prosto_razrabotka 4 года назад

Благодарю.

@Strawhat.. 3 года назад

отличный канал, пожалуй подпишусь!

@AlekMuz 2 года назад

Благодарю!!!

@masterng56 4 года назад

Очень полезное видео, пожалуйста делайте следующий раз шрифт побольше, а то очень мелко.

@romandeveloper5653 3 года назад

Полезная инфа👍

@ihatetoys1528 3 года назад

Спасибо!

@user-ci1yg2cw6c 4 года назад

День добрый подскажите пожалуйста.У меня иконки, подключенные ,как у вас в видео через тег img в index.html не появляются в браузере хром,а в мозиле иконки присутствуют,что делать ,чтоб и в хроме и в опере иконки появились? Спасибо.

@yahyo5452 4 года назад

Спасибо

@user-ci2zo6xt5w 5 лет назад

Привет. размещайте пожалуйста в описании ссылки на использованные ресурсы. Спасибо!

@levos6105 4 года назад

у меня тупо нет этой ссылки на старте сайта Х_________х

@ortotrog751 4 года назад

Класс рассказываешь ,все интересно,понятно, но можно в редакторе кода шрифт больше сделать, а то на телефоне нихрена не видно!

@progames7976 2 года назад

разобрался?

@videoaudio7669 Год назад

купи телефон побольше

@AnatoliySharov 4 года назад

я что-то не увидел почему нет способа вставки svg через object?

@maximmaximov1038 4 года назад

Не становится ш/иконка из Font Awesome - обычный уголок внизу гл. страницы. Во всех браузерах отображается прямоугольник. Подскажите пожалуйста где искать причину?

@Sembiod 4 года назад

Доброго времени суток! Зашел на fontawesome но там нет ссылки той что у Вас в начале урока, чтоб его скопировать. Но зарегистрирован там. Ссылка обезательна или можно без нее! Спасибо!

@prosto_razrabotka 4 года назад

Время идёт, сайт развивается. Возможно перенесли в другой раздел.

@YashaVlazhniu 4 года назад

Zauri Ahmed у меня также, захожу, а там пустая строка для ввода

@bakurikokhodze8250 4 года назад

@@prosto_razrabotka pajalusta pamagite naidti etot link ,skachivat ne udobno :(

@justspartak 4 года назад

Есть же более удобный сервис icomoon.io/app/#/select чтобы использовать набор fontawesome.

@artisoul0852 3 года назад

Это все интересно, но как сделать нормальный фон для иконки, чтобы при бордер-радиусе, не делался овал?

@Alexus1504 3 года назад

Одно не понятно- как все эти иконки спозиционировать на сайте, в отдельно взятом блоке!? Допустим на сайте, в левой части хедера, идут в ряд svg иконки соц сетей. Как их в этот блок внести? Создавать отдельный внутренний блок, задавать ему форму? Как позиционировать svg в этом блоке? Тоже оборачивать их в дивы?

@user-mw8pj9cs8x 3 года назад

На font awesome есть иконки шахматных фигур?

@Orgazmatron72rus 3 года назад

В fierfox с сайта fontawesome не отображаются иконки. Решение пока не нашел

@Podpischik12 Год назад

Здравтсвуйте, у меня проблема я подключил этот кит но у меня не отображаются иконки (free)!

@itsollustrifugate6955 5 лет назад

Я одного не понял, какого лешего так мало подписчиков на данном канале?

@itsollustrifugate6955 5 лет назад

За видео большое спасибо, много нового для себя узнал.

@user-en4ri3hq3d 4 года назад

Я тоже удивляюсь. Видимо канал не распиарен, как у некоторых. Хотя, качество преподнесения материала на высоте.

@justspartak 4 года назад

К сожалению, этого пока точно никто не знает.

@madaminxolmurodov2725 4 года назад

Новый канал

@autoskor2361 3 года назад

А как задать иконкам разный font-size?(у меня у всех только меняется( )

@user-gs1qo7qu6p 4 года назад

Все хорошо, но можно подробнее каждый шаг?уроки ведь для новичков прям..

@user-nc7zt9rj9e 4 года назад

Объясните мне пожалуйста какого перепугу этот Font awesome у меня по другому открывается не так как во всех видео, которые я смотрю. Везде вроде пишешь открывается страничка и ссылка которую можно скопировать и вставить в работу. а у меня вместо ссылки дыра просто или же предлагают регнуться. Регнуться так регнуться. Пишу адресс электронный получаю письмо от сайта с просьбой перейти по ссылке перехожу меня возвращают на сайт и пишут упс!! Типа извини чувак че то нитак ну мы тебе не скажем. Ну почему??? Или есть какой то специальный доступ к этому коду чего всего ютуберы делают до начала видео и прячут от нас. И начинают с готовой страницы. Ну я чайник обЪясните кто нибудь пожалуста. А то уже с сума схожу.

@dmitrijmovenko1935 4 года назад

Та же херня

@user-nc7zt9rj9e 4 года назад

@@dmitrijmovenko1935 не знаю ты новичок как я или нет. Вот на всякий случай ссылкаcdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js ставишь в начале html документа где всякие линк для css пишешь, а дальше на f-a копируешь любую иконку и ставишь куда хочешь. На всякий случай если еще не разобрался.

@dmitrijmovenko1935 4 года назад

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

@user-nc7zt9rj9e 4 года назад

@@dmitrijmovenko1935 +905050607327 вот пожалуйста напиши если че непонятно. Помогу чем могу я тоже не ас.

@nurzatertugan1985 2 года назад

это когда у лысыго из бразерс новой проф

@Alexus1504 3 года назад

Вернее не в ряд, а в колонку.)))

@LLuKKen 3 года назад

Я про спрайты не понял...

@mit7871 4 года назад

ссылки нет кстати сdn

@user-ww8ll9nn7m 4 года назад

...и ни слова про использование svg через object и какие возможности это даёт. :( ну, например, изменение свойств, анимация svg через общую таблицу стилей.

@prosto_razrabotka 4 года назад

Почитайте про предназначение тэга Object...

@user-ww8ll9nn7m 4 года назад

@@prosto_razrabotka Я знаю предназначение этого тега. :) Если вставлять через img, то браузер и будет воспринимать svg, как картинку, например, png. Можно смотреть, нельзя трогать. (Вроде как) даже не пробовал вставлять код svg на страницу - как-то громоздко. Но в случае с object - кратко, и, вот захотел я поменять цвета на сайте (которые, естественно, в переменных). И мне не нужно лезть в сам svg, только в файл vars.сss. И (разные части) лого, иконок, всё перекрасилось.