Sven: CSS Hilfe benötigt zu Selectorenhierarchie

Beitrag lesen

Hi Auge,

Du kannst dir zum Beispiel auf icomoon.io ein deinen bedürfnissen angepasstes Iconset zusammenstellen und dabei auch Icons aus dem FontAwesome-Set einbinden. Welche FA-Version dort benutzt wird, weiß ich allerdings nicht. Jedenfalls kannst du über die Leiste am unteren Bildschirmrand (jedenfalls in einem Desktop-Browser) deine Auswahl sowohl als Font-Set als auch als SVG-Set herunterladen.

Ist wirklich etwas schwierig und zeitaufwändig, sich Icons zusammen zu setzen, die zueinader passen.

… wie würde eine SVG-Grafik eingebunden, wenn ich sie in einem Input-Element oder einem Button bräuchte?

Button (Icons in externer SVG-Datei mit Symbolen):

<!-- HTML -->
<button> name="send">
  <svg class="icon"><use href="data/graphics/icons.svg#send" /></svg>
  <span>Nachricht absenden</span>
</button>

<!-- externe SVG-Datei -->
<svg id="icon-collection" xmlns="http://www.w3.org/2000/svg">
 <!-- weitere Icons -->
 <symbol id="send" viewBox="0 0 128 128">
  <path d="M 117 36 v -10 h -109 v 76 h 109 v -10" fill="none" stroke="currentColor" stroke-width="10px" stroke-linecap="round" stroke-linejoin="round" />
  <path d="M 122 64, 102 44 v 13 h -32 v 14 h 32 v 13 z" fill="currentColor" stroke="currentColor" stroke-width="10px" stroke-linecap="round" stroke-linejoin="round" />
  <path d="M 23 41 h 64 m -32 15 h -32 m 0 15 h 32 m 18 15 h -50" stroke="currentColor" stroke-width="9px" stroke-linecap="round" />
 </symbol>
</svg>

Ja, das hat gut funktioniert, danke.

Sven