Jestli děláte pro svou stránku šablony, jistě víte, že součástí šablony jsou často i různé grafiky, ikony a obrázky.

Pokud je stránka správně udělaná a připravená, není to problém, protože většina grafiky bude dělaná přes background-image a ikony přes sprity.

Co ale dělat v případě, že na stránce je natvrdo napsaný IMG s obrázkem, který potřebujete změnit?

Přímo obrázek změnit nejde, s tím nic nenaděláte, ale ve většině případů lze pomocí CSS změnit stránku tak, aby se dala ikona nebo grafika doplnit (a původní obrázek skrýt).

Nejlepší případ je, když je ikona v odkazu:

<a id="support" href="support.html">
    <img src="help.png" alt="Support" />
</a>

Zde se řešení přímo nabízí – schovat obrázek a místo něj zobrazit pozadí odkazu:

#support > img { display: none; }
#support {
    display: block; /*nebo inline-block */
    width: 1em; height: 1em;
    background-image: url('theme/help.png');
    background-size: 1em 1em;
}

Pokud nejde o klikací ikonu, ale pořád je obalena nějakým prvkem, můžete ho využít stejně:

<div id="textBlock">
    <span class="icon">
        <img src="text-icon.png" />
    </span>
    Tady je text k ikoně.
</div>

#textBlock > .icon > img { display: none; }
#textBlock > .icon {
    display: inline-block;
    width: 1em; height: 1em;
    background-image: url('theme/text.png');
    background-size: 1em 1em;
}

Pokud nemá ikona svůj vlastní obalovací prvek, nebude to již tak jednoduché, ale pořád se dá ikona vyměnit pomocí pozicování pozadí:

<div id="textBlock">
    <img src="text-icon.png" />
    Tady je text k ikoně.
</div>

#textBlock > img { display: none; }
#textBlock {
    text-indent: 1.5em; /* místo pro ikonu */
    background-image: url('theme/text.png');
    background-size: 1em 1em;
    background-position: left top;
}

Podobně se dá příslušný blok omezit pomocí marginu nebo paddingu.

Je prostě potřeba se na konkrétní případ podívat a zkusit se ze stávající HTML struktury vytěžit maximum.

A také zkuste zapřemýšlet, jestli je navrhovaná šablona opravdu nutná tak, jak je navržená. Např. posun ikony trochu doleva/nahoru/apod. nemusí mít vliv na celkový vzhled šablony, ale může výrazně usnadnit umístění ikony pomocí CSS.

A samozřejmě pokud můžete při psaný CSS šablony i mírně pozměnit HTML (nebo JS), není nad čím přemýšlet:

//přidá prázdný blok pro vlastní ikonu
$('#textBlock').prepend(
    $('<span>').addClass('theme-icon').hide();
);

#textBlock > img { display: none; }
#textBlock > .theme-icon {
    display: inline-block !important;
            /* přepíše hide(); */
    width: 1em; height: 1em;
    background-image: url('theme/text.png');
    background-size: 1em 1em;
}