Уроки Bootstrap

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

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

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

Видеоурок

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

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


Помимо иконок от 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 месяца

Также стоит посмотреть

Создание блога на Ruby On Rails
8 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Современная вёрстка адаптивного веб-сайта
Уроки Python Django / Создание сайта
12 уроков
Комментарии для сайта Cackle