X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> FontAwesome: набор шрифтов в форме иконок. Часть 2
TimurR
TimurR
Topic Starter сообщение 17.1.2015, 13:47; Ответить: TimurR
Сообщение #1


В первой части статьи мы уже подключили к своему сайту 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


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


Сообщение отредактировал TimurR - 17.1.2015, 13:54
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вывод на монетизацию канала в Яндекс Дзен, набор 7000 дочиток быстро и безопасно!
20 WildWeb8 5285 6.4.2020, 13:48
автор: WildWeb8
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыCPA сеть admitad.com | Официальный топик Часть 2
105 Antony_ADmitAD 27651 17.3.2020, 10:59
автор: r0mZet
Открытая тема (нет новых ответов) Набор в команду(Работа онлайн)
0 Ambassador2020 1370 28.12.2019, 18:33
автор: -ambassador-
Открытая тема (нет новых ответов) Приватная фарма-партнерка. Ограниченный набор партнеров.
1 Alexdp 2608 12.11.2019, 12:36
автор: Sergey_rx
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыadmitad.com | партнерская сеть - часть 2
Официальный топик партнерской сети admitad.com
92 Antony_ADmitAD 48742 4.3.2019, 14:45
автор: admitad_official


 



RSS Текстовая версия Сейчас: 28.3.2024, 21:31
Дизайн