Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

Начнем с результата:

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

Html:

<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

css:

.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;

}


Вас может еще заинтересовать список тем : #CSS | #FONT_AWESOME | #FONTS | #ICON |
Последняя дата редактирования : 10.12.2020 22:54
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

Последние комментарии :
Марат :
19/01/2021 01:13
Всегда пожалуйста!Приходите ещё!
подробнее.
аркадий :
19/01/2021 01:08
Спасибо!Меню вернулось. Класс!
подробнее.
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.