Метод верстки иконок

[AlexBes]

Добрый вечер. Пыталась найти ответ на свой вопрос через поиск, но ничего толком не нашла.

 

Верстаю я всего пару месяцев, поэтому всегда обращаю внимание на верстку других сайтов, если вижу что-то интересное. Часто натыкалась на то, что иконки вставляют тегом " i ", точнее фоном к этому тегу. Правильно ли это или все зависит от конкретного случая? Потому что я обычно их вставляю фоном к родительскому элементу.

[Galaxy]

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

Правильно ли это или все зависит от конкретного случая? Потому что я обычно их вставляю фоном к родительскому элементу.

а фоном к родителю лучше на ставить лучше делать отдельно(i,span). И еще - лучше делать спрайт иконок , у которого будет прописан бэкграунд к этому спрайту, а отдельными классами указывать background position нужных картинок, таким образом загрузка картинки будет произведена один раз. 

[AlexBes]

Всегда пользуюсь спрайтами, где это возможно. На счет иконок, почему лучше отдельные теги? Какое обоснование?

[Vlad02]

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

или я не прав?

[AlexBes]

Возможно, но это не всегда так. Это единственная причина?

[Vlad02]

послушаем более опытных

[hypnocolor]

Если иконки собраны в спрайт, то рациональней и правильней добавлять их отдельным тегом с заданными координатами фона, дабы конкретная иконка была независимой от своих собратьев по спрайту. Например, иконке будет всё равно на размеры родителя — у неё есть собственные, и остальная часть спрайта гарантированно останется за её пределами. Кроме того, можно управлять расположением иконки относительно родителя, и т.д. Без отдельного тега вы такой гибкости не добьётесь.

Edited May 2, 2014 by hypnocolor

[AlexBes]

hypnocolor, спасибо, теперь все понятно

[Zverushka]

Всегда пользуюсь спрайтами, где это возможно. На счет иконок, почему лучше отдельные теги? Какое обоснование?

Картинка - иконка, отдельный элемент дизайна, который, возможно - захотят вставить в любую часть, любой элемент сайта, это как смайлик. Поэтому выделяется в отдельный тег. 

[npofopr]

Используйте шрифтовые иконки http://fontawesome.io/icons/

А лучше svg.