itProger Відеокурси Изучение технологии Bootstrap (верстка сайта) #8 - Иконочный шрифт и изображения

#8 - Иконочный шрифт и изображения

За счёт иконок можно добавить разнообразие на сайт в виде дополнительных мини изображений. Преимущество иконок заключается в том, что они являются шрифтом, а значит их загрузка куда быстрее нежели использование отдельных картинок.

Відеоурок

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

Полезные ссылки:

Иконки Glyphicons;
Ссылка на скачивание Bootstrap;
Пример всех иконок.

Помимо иконок от Bootstrap также можно использовать иконки Font Awesome. Вы можете посмотреть урок про Font Awesome ниже:

Вихідний код

Изображения и шрифт

<img src="http://happymodern.ru/wp-content/uploads/2015/10/Proekti_karkasnih_domov_41-650x431.jpg" class="img-thumbnail">

<button class="btn btn-success">
  <span class="glyphicon glyphicon-ok"></span>
  Все хорошо
</button>

<span class="badge">57</span>

Онлайн редактор коду

Завантаження...

Завдання до уроку

Иконки от Font Awesome

Подключите к HTML странице иконки от Font Awesome и выведите на экран следующее:

Подивитися відповідь

Для подключения Font Awesome воспользуйтесь их официальным сайтом. На нём необходимо зарегистрироваться и получить ссылку на подключение иконок.

Подключение выглядит следующим образом:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" crossorigin="anonymous">

Далее в HTML пропишите вывод кнопки вместе с иконкой:

<!--
Класс mr-2 означает небольшой отступ справа
Расшифровывается как margin-right
-->
<button class="btn btn-outline-danger"><i class="fas fa-plus mr-2"></i> Добавить</button>

Велике завдання за курсом

Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця

Також варто подивитися