Использование Font Awesome в меню
Будем применять Font Awesome в меню. Например нам хочется использовать шрифт – иконки Font Awesome в меню. Это будет отлично, как мне кажется!
Для этого мы возьмем пару строчек кода меню и прикрепим к нему иконки шрифта Awesom
Результат - меню с использованием шрифта Awesome
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Главная</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Библиотека</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Приложения</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Настройки</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;
}