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

}

Не благодарите, но ссылкой можете поделиться!
Временная ссылка для быстрейшей индексации : список всех квадратных корней.
Теги :
Использование ont Awesome в меню
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Марат :
17.07.2023 15:50
Спасибо за интересный вопрос! Посмотрите …
подробнее.
Александр :
17.07.2023 14:58
а как сделать чтобы при повторном клике значение value возвращалось к…
подробнее.
Марат :
30.06.2023 10:18
Спасибо за внимательность!
подробнее.
???? :
29.06.2023 15:37
Прямоугольник - это геометрическая фигура, у которой три угла…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.014166 секунд. Подробнее