Ikona vedle odkazu

Pro označení odkazu se někdy používají ikony:

• Označení externího odkazu.

  

• Znázornění typu souboru (JPG, GIF, ZIP apod.)
• Označení jazyku odkazu.
• Označení webu, kam odkaz vede.

  

Přidání ikonky

Ikonku jde přidat několika způsoby:

1. Jako pozadí odkazu. Prostor pro obrázek s ikonou se potom připraví paddingem:

   a.ikonka {
     background: url(ikona.png) no-repeat right center;
     padding-right: 20px;
   }

2. Prázdný element – uvnitř <a> bude prázdný <span>:

   <a href="…">
     Text odkazu
     <span class="ikona"></span>
   </a>

   Ikona potom bude mít nastaveny rozměry a obrázek na pozadí.

   .ikona {
     background: url(ikona.png);
     width: 16px;
     height: 16px;
   }
   

   Výhoda tohoto postupu spočívá v tom, že je ikonku jednoduché přesunout před/za odkaz. Také je jednoduší pro element o přesných rozměrech připravit CSS sprite.

   Nevýhodou je nutnost upravit HTML kód.

   V případě ikony v SVG není nutné používat rozměry v pixelech, ale ikona se může přizpůsobovat velikosti textu:

   .ikona {
     background: url(ikona.svg);
     width: 1em;
     height: 1em;
     background-size: contain;
   }
   

3. Pseudo-element :before/:after funguje jako prázdný element a nevyžaduje změnu HTML kódu.

4. Obrázek <img> je nejjednodušší řešení přidání ikonky.

   Někteří lidé zastávají názor, že do <img> ilustrační grafika nepatří, takže se jim takové řešení nelíbí.

Podtržení

V případě, že odkaz s ikonkou má být podtržen, vzniká trochu nehezká situace, kdy je podtržení v mezeře mezi obrázkem/ikonou a textem.

Co s tím?

Pokud se prázdný element s ikonkou vyčlení mimo obsah odkazu, je po problému:

Toto řešení má ale problém jiný – ikonka nebude klikací. A to může vadit.

Odsazení ikonky

Asi nejsnazší řešení je zrušit mezeru v kódu a odsazení vytvořit CSS vlastností margin:

Ikonka už ale potřebuje zvláštní třídy pro odsazení zleva a zprava.

Pozadí odkazu

Při vložení ikonky jako pozadí bez dalšího elementu bude podtržení jen pod textem.

Pseudo-element

Ikonku jde vložit i pomocí :before/:after. Potom je opět nutné odsazení zajistit přes margin:

Zarovnání ikonky

Pro svislé zarovnání ikonky na řádku existují dvě možnosti:

1. Zarovnání CSS vlastností vertical-align.

2. „Ruční“ posun ikonky pomocí position: relative.

Výchozí zarovnání řádkového prvku je na spodek řádku (vertical-align: baseline).

Jak je vidět, pro ikonku nižší, než je výška řádku, je asi nejlepší možnost vertical-align: middle.

Kromě klíčových slov jde u vertical-align použít délkové jednotky – například em, které stanoví vzdálenost elementu od posice baseline.

Následující element tak bude lehce nad baseline:

element {
  vertical-align: 0.2em;
}