Перейти к содержимому


Партнерская программа Kredov

FontAwesome: набор шрифтов в форме иконок. Часть 2

#1 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180
2

Отправлено 17 Январь 2015 - 12:47

В первой части статьи мы уже подключили к своему сайту 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> тем самым теперь и значок является "анкором" ссылки. Если мы посмотрим на результат, то увидим, что они прилегают вплотную к тексту, что не очень красиво:

 

cbe18b4625c5.jpg

 

поэтому давайте зададим им немного отступа по правому краю. Откроем файл 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. Кстати, вот что получилось:

 

9cce3798b64c.jpg


 

 

Сообщение отредактировал TimurR: 17 Январь 2015 - 12:54

  • 1

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.




Оформление форума – IPBSkins.ru