Эти картинки лучше делать через тэг img(или псевдоэлемент)?

Question

[olya_097]

мобильная версия
5be1f36fcf681910768011.jpeg
декстоп

Comments

[alex]

Правило: если картинка является контентом, то только img; если оформлением, то через css. В вашем случае это оформление.

Answer 1

[Stalker_RED]

В идеале через svg или иконочным шрифтом, чтоб не переживать за разные разрешения и плотность пикселей. Это же вектор.

Comments

[olya_097]

ок
а так красиво будет вставлять в код такой кусок кода?

[Dies Irae]

olya_097, лучше вынести во внешний объект:

<object type="image/svg+xml" data=”home-ico.svg" id=’home-ico’ class=’icon’></object>

[Сергей Карвасарный]

мне кажется по любому со вставкой в html, если только ты заранее знаешь, что их будет не много т.к если ты пишешь стили на вставленный svg или img ты можешь грузить хоть миллион ссылок, а вот в Css коде тебе придется или классы вешать на каждый чтобы картинку подгрузить или координаты если это будет спрайт или по нумерации :nth-child(n) что при каждом новом пункте приводит к трате времени)

[tyzberd]

в других вопросах уже давали ссылку на svg спрайты, это самый нормальный вариант

Answer 2

[Сергей delphinpro]

Именно эти картинки (иконки) лучше всего загнать в символьный спрайт и вставлять в html особой конструкцией (покажу ниже).

Символьный спрайт — это один svg файл с набором множества символов. Из каждой иконки достается картинка (отбрасывается вся служебная инфа) и добавляется в общий файл тегом symbol. Такой файл-спрайт будет выглядеть примерно так:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

	<symbol viewBox="0 0 60 60" id="accounting" xmlns="http://www.w3.org/2000/svg">
		<path d="M59 20....."/>
		<path d="M35 32....."/>
		<path d="M38 5h....."/>
	</symbol>

	<symbol viewBox="0 0 60 60" id="archive" xmlns="http://www.w3.org/2000/svg">
		<path d="M59 20....."/>
		<path d="M35 32....."/>
		<path d="M38 5h....."/>
	</symbol>
</svg>

Обратите внимание на идентификаторы символов — по ним будут вставляться иконки в html. Также обратите внимание на отсутствие стилизующих атрибутов и атрибутов style в элементах (path) картинки. Это важно, если вы хотите задавать цвет картинки через css.

Картинка из такого спрайта вставляется в html следующей конструкцией:

<svg class="my-icon">
    <use xlink:href="images/svg-sprite.svg#archive"></use>
</svg>

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

Теперь вы можете полностью управлять вставленной картинкой стилями:

.my-icon {
  width: 50px;
  height: 50px;
  fill: orange; /* Цвет заливки */
  stroke: blue; /* Цвет обводки */
}

Вы можете задать цвет, равным currentColor, и тогда иконка будет того же цвета, что и свойство color. Это бывает удобно.

.my-icon {
  fill: currentColor; /* Цвет заливки */
}

Примечание. В IE есть небольшие проблемы с этим способом. СВГ-спрайт должен быть вставлен в тело страницы. Рекомендую для устранения проблемы воспользоваться скриптом svg4everybody.