Список UL с иконками

Амурский · Регистрация: 11.11.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте. Есть простой список, к нему добавлены иконки см. скрин.

HTML5
1
2
3
4
5
6
            <ul class="list-decor">
                <li><a href="#">Стаканы одностенные</a></li>
                <li><a href="#">Стаканы двухслойные</a></li>
                <li><a href="#">Стаканы гофрированные</a></li>
                <li><a href="#">Бумажные креманки</a></li>
            </ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul.list-decor {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
}
 
ul.list-decor > li {
    position: relative;
    padding-left: 1rem;
    margin: .7rem 0 0;
    line-height: 1.1;
}
ul.list-decor > li:before {
    font-family: "fontello";
    content: '\f0c8';
    position: absolute;
    left: 0;
    top: 4px;
    color: #ff8c00;
    font-size: .6rem;
}

Как сделать, чтобы иконки при наведении на ссылку приобретали цвет ссылки при наведении?

@6elka1703 · 10.08.2018, 19:30

Амурский,

CSS
1
2
3
 ul li a:hover ul.list-decor > li:before{
color:цвет ссылки;
}

Амурский · 10.08.2018, 20:01 **[ТС]**

6elka1703, Так не работает.

@gogolik · 10.08.2018, 20:24

CSS
1
2
3
ul.list-decor > li:hover:before {
    color: #цвет_ссылки;
}

Амурский · 10.08.2018, 20:36 **[ТС]**

gogolik, Так то оно так, но хотелось бы, чтобы именно при наведении на ссылку цвет иконки менялся.

@gogolik · 10.08.2018, 20:50

Амурский, ну тогда before нужно применять к ссылке, а не к элементу списка:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
ul.list-decor > li a:before {
    font-family: "fontello";
    content: '\f0c8';
    position: absolute;
    left: 0;
    top: 4px;
    color: #ff8c00;
    font-size: .6rem;
}
ul.list-decor > li a:hover:before {
    color: #цвет_ссылки;
}

@AlexZaw · 10.08.2018, 20:50

Сообщение от Амурский

но хотелось бы, чтобы именно при наведении на ссылку цвет иконки менялся.

Если вам мешает то что лишки растягиваются на всю ширину, то задайте для ul inline-block.
Если вы про что то другое, то средствами css это не сделать, ну или использовать вариант выше

Амурский · 10.08.2018, 21:13 **[ТС]**

AlexZaw, да, лишки мешают. Значит отступы нужно у li убрать и сделать inline-block. А отступы отрегулировать у тега а.

Добавлено через 6 минут
gogolik, Спасибо, но к ссылке не пойдет. Тогда некрасивый список получается, если длинный текст будет.

Амурский · 10.08.2018, 21:18 **[ТС]**

Поковырялся я над этим кодом. И методом тыка вот так получилось норм, как на втором скрине.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
ul.list-decor {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
}
 
ul.list-decor > li {
    position: relative;
    padding-left: 1rem;
    margin: .7rem 0 0;
    line-height: 1.1;
}
 
ul.list-decor > li a:before {
    font-family: "FontAwesome";
    content: '\f0c8';
    position: absolute;
    left: 0;
    top: 8px;
    color: #ff8c00;
    font-size: .6rem;
}
 
ul.list-decor > li a:hover:before {
    color: #ff0000;
}

Добавлено через 1 минуту
gogolik, я неправильно вас понял. Да, так и сделал.

Новые блоги и статьи Все статьи Все блоги /
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита, которое может. . .	Команды "Заполнить" и "Очистить" на форме документа Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". На примере нетипового документа разработанного в конфигурации КА2. В качестве источника данных указан регистр накопления, в который записываются данные о. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip

Список UL с иконками

Решение

Решение

Амурский 35 / 33 / 12 Регистрация: 11.11.2014 Сообщений: 303
	10.08.2018, 20:01 [ТС]
	6elka1703, Так не работает. 0

Амурский 35 / 33 / 12 Регистрация: 11.11.2014 Сообщений: 303
	10.08.2018, 20:36 [ТС]
	gogolik, Так то оно так, но хотелось бы, чтобы именно при наведении на ссылку цвет иконки менялся. 0

Амурский 35 / 33 / 12 Регистрация: 11.11.2014 Сообщений: 303
	10.08.2018, 21:13 [ТС]
	AlexZaw, да, лишки мешают. Значит отступы нужно у li убрать и сделать inline-block. А отступы отрегулировать у тега а. Добавлено через 6 минут gogolik, Спасибо, но к ссылке не пойдет. Тогда некрасивый список получается, если длинный текст будет. Миниатюры 0