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

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.Работает практически для каждого расширения типа файла там.Это может не сработать для вашего конкретного примера (придется увидеть более широкий контекст), но это отличный трюк для ссылок на скачивание и т. Д.