English Русский

Примеры HTML-кода для использования иконок

1. Самый компактный

<style type="text/css">
#rss {
padding:10px 0 10px 40px;
background-image:url('rss.png');
background-position:left center;
background-repeat:no-repeat;
}
</style>

<p><a id="rss" href="#">Подписаться на RSS</a></p>

Как это выглядит в браузере:

Подписаться на RSS


2. С использованием тэга <img />

<style type="text/css">
#rss img {
position:relative;
top:10px;
margin-right:10px;
}
</style>

<p><a id="rss" href="#"><img src="rss.png" alt="RSS" width="30" height="30" />Подписаться на RSS</a></p>

Как это выглядит в браузере:
RSSПодписаться на RSS

Про валидность и PNG

Приведенные примеры являются полностью валидным XHTML-кодом. Кроме того, данное решение является кроссбраузерным, за исключением одного "но".

Internet Explorer ранних версий некорректно отображает полупрозрачные PNG. Использование фильтра AlphaImageLoader требует задание ширины и высоты элемента, что приводит к вложенности блочного элемента внутрь линейного. Это в свою очередь приводит к нарушениям стандартов XHTML Strict. Выходом можно считать вот такое интересное решение (ресурс на английском языке).