Icon-Link 1.2.0

Nutze .velin-icon-link, um Links mit vorangestelltem oder nachgestelltem Icon automatisch ausgerichtet und mit passendem Abstand darzustellen. English: icon-link

Reifegrad: Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und dort beta / foundation, wo es vermerkt ist.

Wann verwenden

Nutze Icon-Links, wenn ein Icon die Linkhandlung sichtbar unterstuetzt, ohne den Text zu ersetzen.

Wann nicht verwenden

Nutze Icons nicht als alleinigen Linknamen; der sichtbare Text bleibt die wichtigste Information.

Einfaches Beispiel

Mehr lesen
Herunterladen

<a href="#" class="velin-icon-link">
  <velin-icon name="arrow-right" size="16"></velin-icon> Mehr lesen
</a>
<a href="#" class="velin-icon-link">
  Herunterladen <velin-icon name="download" size="16"></velin-icon>
</a>

Hover-Transformation

Fuege .velin-icon-link--hover hinzu, um das Icon beim Hover leicht zu verschieben.

Mehr erfahren

<a href="#" class="velin-icon-link velin-icon-link--hover">
  Mehr erfahren <velin-icon name="arrow-right" size="16"></velin-icon>
</a>