CSS Hilfe benötigt zu Selectorenhierarchie

[Auge]

Hallo

Ich habe Fontawesome jetzt einfach mal komplett außen vor gelassen, weil die die svg-Vectoren bevorzugt über JS einbinden wollen. Das ist mir viel zu ressourcenhungrig. Ich suche mir im Netz die SVGs zusammen, die freie Lizenzen (z.b. MIT) haben und kopiere mir dort die entsprechenden Pfade.

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.

… 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>

Tschö, Auge