#8 - Иконочный шрифт и изображения
За счёт иконок можно добавить разнообразие на сайт в виде дополнительных мини изображений. Преимущество иконок заключается в том, что они являются шрифтом, а значит их загрузка куда быстрее нежели использование отдельных картинок.
Видеоурок
Полезные ссылки:
- Иконки ;
- Ссылка на скачивание;
- Пример всех.
Помимо иконок от 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 месяца
Также стоит посмотреть
Комментарии
