Иконки Font Awesome на сайте
Использовать на сайте иконки Font Awesome очень просто и для этого совсем не надо быть дизайнером. Даже если вы не подберёте себе нужную иконку из коллекции бесплатных (1109 free иконок), то всегда можно купить профессиональный набор (1877 pro иконок).
Сегодня мы будем верстать блок - "Контакты". Это пример типичного информационного блока, обычно от находится внизу сайта или на отдельной странице. Если вы думаете, что это нарисовал дизайнер в фотошопе, то глубоко ошибаетесь. Для создания такого блока вообще не нужен Photoshop, достаточно иметь хороший вкус, немного разбираться в HTML5/CSS3 и уметь работать с иконочным шрифтом Font Awesome.
Работать с иконочным шрифтом мы с вами сегодня научимся, а изучить основы HTML5/CSS3, поможет замечательный видеокурс - "Вёрстка сайта с нуля 2.0".
Как подключить иконки Font Awesome
Официальный сайт: https://fontawesome.com
Самый простой способ подключения - через Font Awesome CDN. Вы просто копируете строчку с ссылкой на файл стилей на официальном сайте и вставляете в свой HTML файл.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
HTML разметка
Создается контейнер div с классом "info-box", внутри которого три элемента li списка ul с двумя span. Span с классом "icon" содержит тег <i></i>, скопированный с сайта Font Awesome при выборе нужной иконки. Между тегами другой span с классом "info" находится контактная информация.
<div class="info-box">
<h2>Контакты</h2>
<ul>
<li>
<span class="icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<span class="info">Ленинский пр. 25, г. Москва</span>
</li>
<li>
<span class="icon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<span class="info"><a href="tel:+7 (495) 431-95-22">+7 (495) 431-95-22</a></span>
</li>
<li>
<span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
<span class="info"><a href="mailto:[email protected]">[email protected]</a></span>
</li>
</ul>
</div>
Так выглядит блок на промежуточном этапе, на голом HTML.
Работа с иконками в CSS файле
В этом селекторе заданы все свойства для иконок, точно такие же свойства мы задали бы и у шрифтов. В том и состоит вся прелесть - простота и гибкость в стилизации шрифтовых иконок. Можно позиционировать, выравнивать и задавать цвета и размеры какие угодно.
ul li .icon {
position:relative;
top: 2px;
display: inline-block;
width: 25px;
color: #9c27b0;
vertical-align: top;
}
Живой пример в браузере, после стилизации.
Верстальщику на заметку
Некоторые дизайнеры в своих PSD макетах используют готовые иконки, установленного шрифта Font Awesome Regular. Начинающего верстальщика это может сбить с толку и вместо того, чтобы вставить иконку через тег <i>, он вырежет иконку и вставит, как картинку. Так делать не надо, это крайне непрофессионально!
Смотрите весь код на jsfiddle.
-
Создано 11.06.2018 10:19:52
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.