Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/47: Рейтинг темы: голосов - 47, средняя оценка - 4.83
 Аватар для Амурский
35 / 33 / 12
Регистрация: 11.11.2014
Сообщений: 303

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

10.08.2018, 19:20. Показов 8709. Ответов 8
Метки нет (Все метки)

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

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;
}
Как сделать, чтобы иконки при наведении на ссылку приобретали цвет ссылки при наведении?
Миниатюры
Список UL с иконками  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
10.08.2018, 19:20
Ответы с готовыми решениями:

Многоколоночный список с иконками
Посоветуйте компонент. Нужно чтобы при заполнении элементов (в столбик) к каждому можно было подцепить пиктограммку(иконку, картинку), а...

Выпадающий список с иконками
Добрый день Всем, кто не спит! Подскажите пожалуйста, как мне реализовать выпадающий список, в котором перед пунктами должны размещаться...

Список процессов с иконками
Каким образом можно отабразить собственные иконки приложений в списке процессов? Процессы перечисляю так: HANDLE hProcessSnap; ...

8
 Аватар для 6elka1703
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
10.08.2018, 19:30
Амурский,
CSS
1
2
3
 ul li a:hover ul.list-decor > li:before{
color:цвет ссылки;
}
0
 Аватар для Амурский
35 / 33 / 12
Регистрация: 11.11.2014
Сообщений: 303
10.08.2018, 20:01  [ТС]
6elka1703, Так не работает.
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3969 / 2087 / 832
Регистрация: 13.03.2010
Сообщений: 6,886
10.08.2018, 20:24
CSS
1
2
3
ul.list-decor > li:hover:before {
    color: #цвет_ссылки;
}
1
 Аватар для Амурский
35 / 33 / 12
Регистрация: 11.11.2014
Сообщений: 303
10.08.2018, 20:36  [ТС]
gogolik, Так то оно так, но хотелось бы, чтобы именно при наведении на ссылку цвет иконки менялся.
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3969 / 2087 / 832
Регистрация: 13.03.2010
Сообщений: 6,886
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: #цвет_ссылки;
}
0
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2381 / 1741 / 677
Регистрация: 07.08.2016
Сообщений: 4,095
10.08.2018, 20:50
Лучший ответ Сообщение было отмечено Амурский как решение

Решение

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

Добавлено через 6 минут
gogolik, Спасибо, но к ссылке не пойдет. Тогда некрасивый список получается, если длинный текст будет.
Миниатюры
Список UL с иконками   Список UL с иконками  
0
 Аватар для Амурский
35 / 33 / 12
Регистрация: 11.11.2014
Сообщений: 303
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, я неправильно вас понял. Да, так и сделал.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
10.08.2018, 21:18
Помогаю со студенческими работами здесь

Какой компонент использовать, если нужен список с иконками
Посоветуйте с помощью какого компонента можно отобразить список друзей пусть без фото, хотя бы с иконками (онлайн, занят, отошел, отключен)...

Получить список программ в таблицу, с иконками, которые установлены на компьютере
Здравствуйте форумчане. Появилась идея создания программы. И мне необходимо получить список программ в таблицу, с иконками, которые...

Работа с иконками
Подскажите, как программно узнать какая иконка у папки/файла и загрузить её например в TImage?

ListBox с иконками
Здравстуйте. Нужно сделать ListBox с иконками, чтоб каждой строке отвечала своя картинка. Может сталкивался кто-то с проблемой? Вроде...

кнопка с иконками
Здравствуйте, скажите, пожалуйста, как поместить на button допустим слева от текста маленькую иконку? Задача вроде простая, а я туплю и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Сумматор с применением элементов трёх состояний.
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
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru