DWWEB.RU
СКРИПТЫ

Использование Font Awesome в меню

Будем применять Font Awesome в меню. Например нам хочется использовать шрифт – иконки Font Awesome в меню. Это будет отлично, как мне кажется!

Для этого мы возьмем пару строчек кода меню и прикрепим к нему иконки шрифта Awesome

<div class="list-group">

<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Главная</a>

<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Библиотека</a>

<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Приложения</a>

<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Настройки</a>

</div>

После этого нам потребуются стили, которые нарисуют нам меню вместе с иконками шрифта Awesome

.list-group {

width: 36%;

}

.list-group-item:first-child {

border-top-right-radius: 4px;

border-top-left-radius: 4px;

}

a.list-group-item, button.list-group-item {

color: #555;

font-size: 14px;

font-family: monospace;

}

.list-group-item {

position: relative;

display: block;

padding: 10px 15px;

margin-bottom: -1px;

background-color: #fff;

border: 1px solid #ddd;

}

a.list-group-item:hover,

button.list-group-item:hover,

a.list-group-item:focus,

button.list-group-item:focus {

text-decoration: none;

color: #555;

background-color: #f5f5f5;

}

Результат - меню с использованием шрифта Awesome

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
Использование ont wesome в меню

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019