В первой части статьи мы уже подключили к своему сайту FontAwesome и создали тестовый значок на странице, чтобы убедиться, что все работает как надо. В этой части мы попробуем первый метод интеграции этих иконок в горизонтально меню при помощи добавления в код html страницы элемента <i> с соответствующими классами. Для того, чтобы знать какие классы соответствуют определенным иконка, перейдите на страницу
полного списка всех имеющихся иконок. Как мы видим, все очень удобно, сами иконки разбиты по разделам и рядом с каждой иконкой есть ее класс. Но, лично мне удобней выбирать из
этого списка, так как оттуда можно скопировать иконку, класс или номер в юникоде. Это удобно, когда вы работаете в Фотошопе или сразу в верстке.
Вод кон нашего горизонтального меню, в котором еще нет иконок:
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">История</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Видео</a></li>
<li><a href="#">Контакты</a></li>
</ul>
Как мы видим, это обычный список, внутри которого есть ссылки. Теперь добавим сюда немного иконок. Кстати, вы наверное заметили, что пунктов меню стало меньше. Это сделано в угоду нормальных размеров меню, так как ширина у нас фиксированная.
В итоге у нас получается вот такой код:
<ul>
<li><a href="#"><i class="fa fa-home"></i>Главная</a></li>
<li><a href="#"><i class="fa fa-users"></i>Форум</a></li>
<li><a href="#"><i class="fa fa-university"></i>История</a></li>
<li><a href="#"><i class="fa fa-bullhorn"></i>Новости</a></li>
<li><a href="#"><i class="fa fa-video-camera"></i>Видео</a></li>
<li><a href="#"><i class="fa fa-pencil"></i>Контакты</a></li>
</ul>
То есть, мы вставили элемент <i> в элемент <a> тем самым теперь и значок является "анкором" ссылки. Если мы посмотрим на результат, то увидим, что они прилегают вплотную к тексту, что не очень красиво:
поэтому давайте зададим им немного отступа по правому краю. Откроем файл CSS и пропишем следующие стили:
.main-menu ul li a i {
padding-right: 4px;
}
Так как в блоке с классом .main-menu лежит список <ul>, внутри элемента <li> которого лежит ссылка <a> и уже внутри ссылки лежит <i> обращаться следует именно так. Но, если мы обратимся просто как .main-menu i, то это тоже сработает, но стили зададутся всем элементам <i>, которые находятся в блоке .main-menu. Если вы не хотите, чтобы иконки были частью ссылки, то достаточно вписать их перед тегом <a>. Еще раз обратите внимание на то, какие классы имеет элемент:
<i class="fa fa-pencil">
Так, класс fa является необходимым классом, а сразу за ним следует задавать класс конкретной иконки. Так же вы можете добавить свои классы, чтобы обращаться к ним из CSS или идентификаторы для оперирования к при помощи JS. В третьей части, мы научимся их вставлять посредством :after и :before, а также крутить их средствами самого FontAwesome и JavaScript. Кстати, вот что получилось:
Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|
Сообщение отредактировал TimurR - 17.1.2015, 13:54