Что является предпочтительным механизмом для использования значков с метками кнопок

Question

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

<a href=""> 
    <img alt src="img/save.gif" class="icon"> 
    <span>Save</span> 
</a> 

ИЛИ

бы смысл сделать объединить это в единый объект (т.е. значок изображения плюс метка).

Я беспокоюсь, если мы выберем другую тему (цветовая схема), тогда я не смогу использовать разные цвета для своих меток и, возможно, придется регенерировать изображение. Использование первого подхода дает мне возможность сделать это.

Answer 1

Я не знаю о макете или цвета, которые вы используете, но следующие мои пункты:

1. Относительное выравнивание между изображением и текстом может быть трудно для того чтобы достигнуть (с моей основной HTML/CSS знания), когда у вас есть два отдельно

2. Вы можете использовать их отдельно, потому что вы хотите изменить цвет текста во время «изменения цветовой схемы». Но вы уверены, что не хотите менять изображения (другой набор значков)? У вас может быть такая же проблема несоответствий цвета. (Вы можете выбрать значки таким образом, чтобы они «шли» со всеми цветовыми схемами вашего сайта, а затем вы можете выбрать цвет ваших меток в одном и том же значке).

Опять же, я не уверен, что из компоновочных/цвета вы выбираете, поэтому окончательный ответ (как всегда) «зависит от вашего сайта»

Answer 2

Рассмотрим гиперссылок сигналы для обычных иконок ссылок. Например:

HTML

<a href="files/holidays.pdf">View Holidays</a> 

CSS

a[href $='.pdf'] { 
     padding-right: 18px; 
     background: transparent url(icon_pdf.gif) no-repeat center right; 
    } 

Укладка каждый из них может быть обработан в CSS. Работает практически для каждого расширения типа файла. Это может не сработать для вашего конкретного примера (нужно было бы увидеть больший контекст), но это отличный трюк для ссылок на скачивание и т. Д.