Как добавить иконку в css
Перейти к содержимому

Как добавить иконку в css

  • автор:

Как правильно вставить иконку li через CSS?

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).

На сайте с 21.04.2010
18 сентября 2011, 12:13

У свойства background-image может быть только одно значение — путь к графическому файлу. Тобишь, вы либо расписываете все свойства по одиночке: background-image: url(‘images/1.gif’); background-repeat:no-repeat; background-position: top left; либо укороченным вариантом, что намного проще: background: url(‘images/1.gif’) top left no-repeat;

Как создать иконку меню на CSS

Создаем иконку меню из 1 дива. Без псевдоклассов, before и after.

Как создать иконку меню из трех полосок на CSS

Как правило, эта иконка создается несколькими способами. В том числе, при помощи подключения замечательного шрифта FontAwesome (fas fa-bars). Но давайте попробуем сделать это на чистом CSS. Для начала создадим наш HTML элемент:

#lines

Что же получится в результате:

Вот и всё, мы научились делать иконку меню. При наведении (ховере) вы можете менять цвет иконки, выставив border-color.

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Читайте також:

Залишити відповідь Скасувати відповідь

Щоб відправити коментар вам необхідно авторизуватись.

Иконка-ссылка в HTML

Чтобы сделать ссылку в виде иконки или сделать иконку ссылкой, нужно поместить эту иконку внутрь тега . Если в качестве иконки используется не картинка, а иконочный шрифт, то и это не проблема — ссылку сделать можно.

Сперва пример HTML-кода, если иконка все же является обычной картинкой:

Иконка

Как Вы видите, внутрь тега помещена картинка . Это самый простой и быстрый способ добавления обычной картинки на сайт, а семантически правильная вставка изображения описана здесь — «Как же все-таки правильно вставить картинку в HTML».

Что делать, если картинка в формате svg? Это вообще отдельная тема, и она тщательно описана здесь — «Как вставлять SVG-иконки в HTML — 5 способов и выбор наилучшего».

Лучше добавлять иконку именно через HTML. Но есть возможность привязать иконку к ссылке не через HTML, а через CSS. Делается это через CSS-свойство background в файле типа файл.css. Пример:

При этом нужно прописать для ссылки display: block; и указать размеры width и height.

Иконочный шрифт

Добавим ссылку иконку через иконочный шрифт на примере шрифта FontAwesome. Шрифт нужно сперва скачать в папку сайта. Потом подключить шрифт в теге строкой вида:

Здесь нужно указать путь до места, куда вы скачали шрифт.

Далее использовать иконку в ссылке надо так:

Все иконки можно увидеть на этой странице — fontawesome.ru/all-icons.

Подключение иконки Font Awesome через CSS

Иконке, подключенной через CSS, можно будет менять цвет при наведении курсора.

Чтобы подключить иконку Font Awesome через CSS нужно в CSS-файле использовать код вида:

a:before

Здесь иконка добавлена через псевдокласс :before. В свойстве контент указывается код иконки. Код иконки можно взять на странице fontawesome.ru/all-icons. Нужно кликнуть правой кнопкой мышки на нужную иконку и посмотреть её псевдокласс :before. Смотрите картинку:

Верстка иконок с помощью псевдо-элементов и css свойства clip

Хороший способ верстки иконок, расположенных рядом с заголовками, или в качестве нестандартных маркеров списка — с помощью псевдо-элементов.

Раньше я это делал с помощью дополнительной разметки — например, тега , который позиционировал абсолютно и фоном задавал картинку-спрайт с иконками.

Это способ позволяет избежать дополнительной разметки, но для IE младше 8го нужно написать expression, который будет осуществлять вставку псевдо-элемента.

Итак, есть заголовок:

И перед ним мы хотим поставить иконку из спрайта:

#anchor-header <
position : relative ;
padding-left : 21px ;
background-image : expression ( this .runtimeStyle .backgroundImage = «none» ,
this .innerHTML = » + this.innerHTML ) ;
>

Получаем заголовок с иконкой:

По сравнению со способом, где иконка делается background’ом, преимущества следующие:

  • При печати иконка будет выводиться, потому что задана с помощью , а не фоном;
  • Не нужна дополнительная html-разметка.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *