СКРИПТЫ
ТЕГИ:
php (315)
js (235)
html (145)
css (125)
html tags (62)
js tag (56)
jquery (41)
text (36)
js method (35)
js date (32)
php array (31)
form html (30)
fonts (27)
link (26)
ruweb.net (25)
Показать еще :
online (24)
foto (22)
php file (21)
atom (20)
forum (19)
svg (18)
hosting (17)
php date (17)
php time (16)
html book (16)
input (16)
board (16)
color (15)
js events (14)
js url (14)
img (13)
js time (13)
notepad (13)
htaccess (13)
osclass (13)
table (12)
info (12)
select (12)
dw block (12)
php path (12)
знак (12)
php img (12)
jsphp (11)
icon (11)
download (11)
form (11)
keyboard (11)
js delete (10)
yandex (10)
mouse (10)
hover (9)
dosite (8)
comment (7)
cookie (7)
php url (7)
click (6)
browser (6)
php get (6)
year (6)
list (6)
iframe (6)
mysql (6)
adminka (5)
js id (5)
mb (5)
chart (5)
heading (5)
value (5)
ftp (5)
search (5)
tag a (5)
js math (4)
ucoz (4)
reg.ru (4)
task (4)
vk (4)
symbols (4)
ssl (4)
нок (4)
day (4)
week (4)
js form (4)
submit (4)
bbcode (4)
pages (4)
month (4)
base64 (4)
console (4)
php var (4)
js hash (3)
captcha (3)
numbers (3)
куб (3)
padding (3)
line (3)
scandir (3)
js img (3)
https (3)
js post (3)
vs code (3)
seo (2)
sitemap (2)
prompt (2)
js vars (2)
tag hr (2)
video (2)
youtube (2)
qr kod (2)
google (2)
arrows (2)
typeof (2)
money (2)
рся (2)
height (2)
details (2)
domen (2)
counter (2)
cursor (1)
smile (1)
speed (1)
windows (1)
archive (1)
rutube (1)
scroll (1)
нод (1)
header (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;

}

Можете не благодарить, лучше помогите!
Теги :
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.019315 секунд. Подробнее