Войти
Меню :
icon (11)
fonts (30)
css (139)



Blog (1575)
php (386)
js (295)
html (152)
css (139)
html tags (62)
js tag (56)
js method (44)
jquery (42)
php array (38)
ruweb.net (37)
text (37)
js date (33)
other (32)
online (30)
form html (30)
Показать еще :
fonts (30)
js events (22)
php file (21)
foto (20)
atom (20)
input (19)
database (19)
php date (18)
svg (18)
forum (18)
mysql (17)
hosting (17)
info (17)
lingvo (17)
php time (16)
board (16)
php img (16)
dosite (16)
color (15)
js url (14)
jsphp (14)
img (14)
js time (14)
table (13)
select (13)
notepad (13)
знак (13)
html book (13)
htaccess (13)
osclass (13)
yandex (13)
download (12)
keyboard (12)
dw block (12)
php path (12)
icon (11)
$ server (11)
form (10)
mouse (10)
vs code (10)
js delete (10)
ftp (9)
hover (8)
chart (8)
php url (7)
comment (7)
php post (7)
adminka (6)
php get (6)
hey tag (6)
canvas (6)
нок (6)
list (6)
iframe (6)
click (6)
js vars (6)
reg.ru (5)
tag a (5)
js math (5)
web (5)
js id (5)
value (5)
console (5)
js file (5)
xml (5)
heading (5)
mb (5)
year (5)
js form (4)
ssl (4)
vk (4)
symbols (4)
task (4)
scandir (4)
js hash (4)
bbcode (4)
base64 (4)
youtube (4)
day (4)
numbers (4)
php var (4)
pages (4)
week (4)
month (4)
games (4)
submit (4)
file (3)
рся (3)
units (3)
jquery post (3)
https (3)
js post (3)
line (3)
money (3)
video (3)
padding (3)
domen (3)
aimp (3)
ucoz (3)
куб (3)
captcha (3)
src (2)
blob (2)
google (2)
prompt (2)
height (2)
details (2)
seo (2)
sitemap (2)
tag hr (2)
counter (2)
пк (2)
typeof (2)
arrows (2)
qr code (2)
js img (2)
lingvo (1)
windows (1)
archive (1)
speed (1)
scroll (1)
cursor (1)
webp (1)
ok (1)
php day (1)
jino (1)
smile (1)
нод (1)
rutube (1)

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

Будем применять 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;

}

Не стесняемся говорить спасибо!
О комментах : 05.11.2024
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Друзья! Пожалуйста держите себя в рамках приличия!
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Теги:
Использование ont Awesome в меню
dwweb.ru есть здесь:
Все соцсети в одном месте!
Разное :Игра "пятнашки"
Угадай страну по флагу

Кальклятор
Математика онлайн

Списки шифрования
Часы

Числа словами
Названия чисел(max=10305)
Графики

Qr код онлайн

Как сделать сайт?
Md5 онлайн
Sitemap.html
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Лучший хостинг : RUWEB + помощь по RUWEB Сайт работает круглосуточно 24/7.
Страница загружена за : 0.019989 секунд.