Выпадающий список Компьютерные иконки Стрелка, Стрелка, cdr, угол png
Выпадающий список Компьютерные иконки Стрелка, Стрелка, cdr, угол pngтеги
- cdr,
- угол,
- черный,
- инкапсулированный PostScript,
- значок стрелки,
- линия,
- шрифт Awesome,
- раскрывающийся список,
- стрелка вниз,
- вниз,
- значки компьютеров,
- кнопка,
- закладка,
- стрелка,
- веб-браузер,
- png,
- прозрачный png,
- без фона,
- бесплатная загрузка
- Размер изображения
- 512x512px
- Размер файла
- 2.24KB
- MIME тип
- Image/png
изменить размер PNG
ширина(px)
высота(px)
Некоммерческое использование, DMCA Contact Us
32KB
45KB
org/ImageObject»> Компьютерные иконки Раскрывающийся список Стрелка, Стрелка, cdr, угол png
512x512px
2.54KB
22KB
org/ImageObject»> значок галочки, галочка Checkbox Компьютерные иконки Шрифт Awesome, Check, разное, угол png
512x512px
5.4KB
35KBОформление списка HTML5 с использованием иконок WebFonts
Неупорядоченные списки HTML выглядят скучновато. Вы можете задать стрелочку, кружок или квадрат, но их размеры и цвета, не так просто изменить. Можно использовать list-style-image, чтобы задать картинку, но она не будет 100% совпадать с размером шрифта. Оформление списка является довольно сложной вещью, а также есть баги в старых версиях IE.
А теперь представьте себе, что, если бы мы могли использовать любой значок, в любом цвете вместо стандартного непронумерованного списка…?
Webfonts
Иконки Webfont – это векторная графика, представляющая собой иконки и символы в файлах шрифтов, которые могут быть загружены и использованы в HTML, CSS и JavaScript. Они могут масштабироваться до любого размера, предлагая превосходную совместимость с браузерами (поддержка IE6 +), а один шрифт, обычно загружается быстрее, чем несколько изображений.
Есть несколько онлайн-инструментов, которые помогут вам подобрать соответствующие значки, а затем упаковать их в файлы шрифтов с кросс-браузерной поддержкой.
Мы использовали Fontello, но IcoMoon и Flaticon также в состоянии сделать подобную работу.
Замена WebFont Иконок
Во-первых, нам нужен стандартный HTML список. Мы добавим класс icon к ul тегу, а еще мы можем применить различные классы к каждому li тегу, чтобы задать различные значки:
<ul> <li>Номер 1</li> <li>Номер 2</li> <li>Номер 3</li> </ul>
Далее, мы установим list-style-type на none, чтобы удалить стандартное оформление списка. Затем мы установим негативный text-indent на каждый li для того, чтобы передвинуть первую линию каждого элемента списка обратно. Мы использовали 1.4em, но вы можете изменить этот размер по мере необходимости:
ul.icon
{
list-style-type: none;
}
ul.icon li
{
text-indent: -1.4em;
}
Чтобы добавить значок, мы используем один из наших наборов иконок в content свойстве li:before псевдо-элемента.
Обратите внимание, что он float:left и его ширина соответствует text-indent устанавленного выше. Таким образом, это будет толкать первую строку обратно в исходное положение:
ul.icon li:before
{
font-family: bullets;
content: "\e800";
float: left;
width: 1.4em;
}
Теперь мы можем установить различные иконки WebFont в зависимости от имени класса li, например:
ul.icon li.info:before { content: "\e800"; }
ul.icon li.star:before { content: "\e803"; }
ul.icon li.help:before { content: "\e801"; }
ul.icon li.bulb:before { content: "\e804"; }
ul.icon li.hand:before { content: "\e805"; }Кроме того, можно настроить различные свойства color, font-size и расстояние. Значки будут появляться, где вы хотите и в соответствие с размером текста списка. Теперь, оформления непронумерованных списков явяются очень легкой и интересной задачей!
15-03-2016
Понравилась статья? Поделитесь впечатлениями или расскажите о вашем опыте.
КомментироватьМодуль списка значков Divi — Divi Supreme
ПРЕДСТАВЛЯЕМ
Используйте модуль списка значков для создания красивых списков с такими функциями, как всплывающая подсказка при наведении и т. д.
Демонстрация #1
Создавайте красивые списки значков, которые сияют
Вы можете использовать модуль списка значков для создания привлекательных контрольных списков или пунктов меню нижнего колонтитула со значками и многим другим
- lНапишите статьи для нас
- iPro воздуховод Документация
- Центр pHelp
- О нас / Команда
- Свяжитесь с нами
- Блог
- Личный кабинет 9 0018
- Сообщество Facebook
- Журнал изменений
- Часто задаваемые вопросы uFAQ
- Цены
- Политика конфиденциальности
Демонстрация #2
Пусть сияет с помощью всплывающих подсказок при наведении курсора Вы даже можете добавить всплывающую подсказку для отображения при наведении курсора, что сделает модуль более интересным для использования на вашем сайте.
lНапишите статьи для нас
У вас есть талант?
Мы будем рады нанять вас, чтобы вы писали для Нас!Документация iProduct
Узнайте больше о том, как использовать наш продукт, из подробной документации.
Центр помощи pH
Нужна помощь?
Мы поможем вам нашим Лучшим!
О нас / команда
Хотите узнать о нас больше?
Мы тебе в этом поможем.Свяжитесь с нами
Свяжитесь с нами для любого запроса или партнерства.
Блог
Смотрите последние новости нашего сообщества!
Демо #3
Использовать изображение вместо значкаЕсли вы хотите добавить свой собственный значок или изображение, у вас также есть такая возможность.
Бургер с ветчиной и овощами
nam aliquam sem et tortor consequat id porta nibh venenatis
Овощной салат с белым хлебом
nam aliquam sem et tortor consequat id porta nibh venenatis
Демонстрация №4 Создавайте красивые таблицы цен с дополнительной информацией о каждой функции
Возьмите свои таблицы цен на совершенно новый уровень, предоставьте больше информации для каждой функции в вашей таблице с помощью всплывающей подсказки при наведении.
Персональный
Для 1 сайта
N1 Год поддержки/обновлений
Вы получите премиум-поддержку по электронной почте и обновления плагинов на целый год.
Премиум-модули N40+
Вы получите доступ к более чем 40 модулям Creative Divi, чтобы запустить свой следующий веб-сайт Divi.
Премиум-расширения N7
Вы получите не только более 40 модулей, но и более 7 расширений Divi для расширения функциональных возможностей вашего сайта Divi.
40 долларов в год
Купить сейчас
Professional
Для неограниченного количества сайтов
Год поддержки/обновлений N1
Вы получите премиум-поддержку по электронной почте и обновления плагинов на целый год.
Премиум-модули N40+
Вы получите доступ к более чем 40 модулям Creative Divi, чтобы запустить свой следующий веб-сайт Divi.
79 долл. США в год
Купить сейчас
Агентство
Пожизненно
NLifetime Support / Updates
9 0002 Вы получите премиум-поддержку по электронной почте и обновления плагинов на целый год.
Премиум-модули N40+
Вы получите доступ к более чем 40 модулям Creative Divi, чтобы запустить свой следующий веб-сайт Divi.
Премиум-расширения N7
Вы получите не только более 40 модулей, но и более 7 расширений Divi для расширения функциональных возможностей вашего сайта Divi.
199 долларов США в год
Купить сейчас
Поднимите Divi на новый уровень с Divi Supreme
В этом плагине есть все, что вам нужно, чтобы с легкостью создавать потрясающие веб-сайты. Постоянно лидирует на официальном рынке Elegant Themes Divi
Редактировать значок списка PNG и вектор SVG скачать бесплатно
Редактировать значок списка PNG и вектор SVG скачать бесплатноМы создаем новые иконки каждый день. Станьте покровителем UXWing для поддержки сайта всего за $1/месяц!
Поделиться этой страницей
Форматы: Оптимизированный файл SVG, уменьшенный файл PNG / PNG Размер: 512px x 512px / Категория: Редактирование, Пользователь, Действие
Лицензия: Все иконки можно свободно использовать в любых личных и коммерческих проектах без указания авторства или указания авторства.