Как подключить и использовать шрифтовые иконки Font Awesome

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

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

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Научимся подключать и использовать в своей работе векторные шрифтовые иконки Font Awesome и подобные.
Скачать Font Awesome и стартер: webdesign-master.ru/blog/tool...
Таймкоды:
00:00 Начало урока
00:16 Что такое Font Awesome
00:24 Что в архиве Font Awesome
00:47 Подключение Font Awesome
02:01 Использование Font Awesome (см. страницу урока)
03:43 Размер и цвет иконок
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

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

2 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@wdm Месяц назад

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

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

На странице GitHub папка "start_html" содержит теперь несколько стартеров. Стартер, который рассматриваем в этом видео находится в папке "_clean_html" (GitHub). Стартер дополнен некоторыми необходимыми компонентами для удобства разработки.

@deabdullin 9 лет назад

Как раз сегодня начал нормально этими иконками пользоваться, полезная штучка!

@bonnycastleful 6 лет назад

Спасибо! Вы такой крутой!

@MovieEnglish 7 лет назад

Добрый день, скачал ваши шаблоны - start_html - у меня вопрос, почему в них не работает комбинация клавиш - cnrl -+ или прокрутка мыши? То есть я не могу увеличить текст или шаблон. Спасибо.

@eone6667 7 лет назад

можно ли сделать авто обновление ?или подключить напрямую с серверов font awesome?

@Igrotouch 9 лет назад

Вещь просто суперская, пользуюсь уже месяц!

@forspyke 9 лет назад

все верно, только при поиске иконок лучше использовать встроенный поиск сайта(вверху страницы со списком всех иконок), т.к. ищет не только по точному названию но и включает порой полезные ассоциативные иконки

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

Добрый день, как вы определили, что писать в пути link... где это взять ?

@kjbk4421 7 лет назад

огромное спасибо

@kartveli521 5 лет назад

Спасибо!

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

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

@user-sb4sj4xr9q 8 лет назад

Под музычку просто супер ! )

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

Спасибо

@user-ws1tu9mz3c 7 лет назад

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

@Retyuiiop 6 лет назад

Подскажите пожалуйста цвет иконок не меняется.....?

@vlandroid95 8 лет назад

Вначале не понимал почему не получалось, а потом понял что папка обязательно должна называться font-awesome!

@katerynakurak5923 8 лет назад

Напишите пожалуйста или создайте видеоролик. Буду благодарна.

@sacrancy 9 лет назад

Пожалуйста сделайте видео про адаптацию вёрстки под retina. Буду очень благодарен

@wdm 9 лет назад

Просто не используйте растр для иконок.

@sacrancy 9 лет назад

WebDesign Master то есть размеры блоков на ретина не искажаются, а для фото к примеру просто вставлять изображения в 2 раза больше?

@wdm 9 лет назад

Максим Куликов Не нужно мудрить про размеры блоков, CSS пикселы и другие единицы измерения отображаются соответственно не Retina дисплеям. Фотографии можете вставлять другого размера, но это уже не элементы интерфейса, а контент.

@moegreen8543 9 лет назад

в документации по FontAwesome также упоминается возможность изменения размеров иконок с помощью готовых классов - fontawesome.io/examples/

@programmer-stories 8 лет назад

+Valery Semenencko Вы правы, но вот то, что касается не относительных, а точных размеров, а также изменение цвета и бордеров у некоторых иконок, всё-таки лучше задавать собственными модификаторами классов. ))

@yulalalala8845 8 лет назад

можно awesome использовать в названии видеороликов на ютуб?

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

ютуб не пользуется авесоме:)))

@wdm 5 месяцев назад

Здравствуйте. Вы можете использовать эмодзи в названиях. Для Windows можно нажать сочетание клавиш Win + V, включить расширенный буфер обмена, если он отключен и выбрать нужный смайлик на вкладке смайликов) В другой операционке или на мобильных - есть соответствующая раскладка.

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

качать обязательно ?

@wdm Год назад

Да, иконки размещаются физически на вашем сервере или в вашей HTML верстке.

@user-zc4ft9di3r 8 лет назад

как подключить без start_html ???

@mrBurlaka1 7 лет назад

Копируешь файлы font-awsome в папку проекта. Это там где у тебя находятся файлы html кода и index.css. В html прописываешь путь Как видно у меня была версия font-awesome-4.6.3. Дальше копируешь код картинки и вставляешь в html . Дальше сохраняешь, обновляешь. Все должно получиться.