nicht angemeldet
Rolf B
Rolf B
klawischnigg
Gunnar Bittersmann
Matthias Scharwies
Gunnar Bittersmann
Auge
Auge
Gunnar Bittersmann
Rolf B
Hallo,
ich tausche gerade meine Gif-Icons aus den 2000er Jahren gegen Font-Awesome-Icons aus. Auch nicht gerade der Hit, aber etwas moderner und harmonischer.
Nun besteht aber das Problem, dass diese fa-Icons etwas unterschiedlich groß wirken und auch in Höhe nicht komplett auf einer Linie stehen, wenn ich mehrere hintereinander einsetze.
Den Icons selber kann ich ja eine Klasse vergeben, um sie ein wenig zu stylen.
Z.B.
.fa_bearbeitung {
font-size: 15px;
padding-right: 0.25em;
color: blue;
}
Wie aber muss ich nun verfahren, wenn ich weitere Selektoren hierzu benötige.
Ich muss dafür doch sicher nicht für alle variationen eigene Klassen anlegen, oder? Und sicher auch nicht ins Element selber style='irgendwas' im Code notieren, oder?
Gibt es da eine geschickte Hierarchie, die ich nutzen könnte?
Sven
Hallo Sven,
1 geht. :hover, :focus, :target, schau dich unter den Pseudoklassen um.
2+3: ich wüsste nicht, wie
Rolf
Hallo Rolf,
1 geht. :hover, :focus, :target, schau dich unter den Pseudoklassen um.
Mit 1 meinte ich einen von mir definierten zustand, ob das Icon aktiv ist oder nicht. z.b. darf ein bestimmter Vorgang nihct gelöscht werden, dann will ich das Icon ausgrauen.
2+3: ich wüsste nicht, wie
Hm. Wenn Du es schon nicht weiß, wirds schwierig für mich.
Sven
Hallo Sven,
Zu 1: dieser aktiv Zustand äußert sich sicherlich durch eine Klasse.
Fall 1a: ein Elternelement hat die Klasse. Du brauchst den Nachfahrenkombinator (eine Leerstelle)
.aktiv .fa_bearbeitung {
...
}
Fall 1b: das Iconelement hat die Klasse. Schreibe beide Klassenselektoren aneinander
.aktiv.fa-bearbeitung {
...
}
Rolf
Hi there,
- Je nachdem, ob das Icon etwas zu groß oder klein ist, möchte ich es den font-size ändern.
Du könntest das Font-Icon in ein Blockelement einbauen und dann mit Javascript dessen Höhe abfragen. Mit CSS alleine wird das imho nicht gehen. Ob das auch ohne umfassendes Blockelement geht, weiß ich nicht, ich kenne da zwar keinen Weg, die Höhe eines Buchstabens abzufragen, aber denkbar wäre es ja.
- Je nachdem, ob das Icon zu hoch oder tief ist, möchte ich es mit vertical-align etwas anheben oder absenken.
Dazu fällt jetzt selbst mir nichts mehr ein (ausser auf Fonts mit Ober- oder Unterlängen zu verzichten)...;)
Hallo,
Du könntest das Font-Icon in ein Blockelement einbauen und dann mit Javascript dessen Höhe abfragen. Mit CSS alleine wird das imho nicht gehen. Ob das auch ohne umfassendes Blockelement geht, weiß ich nicht, ich kenne da zwar keinen Weg, die Höhe eines Buchstabens abzufragen, aber denkbar wäre es ja.
- Je nachdem, ob das Icon zu hoch oder tief ist, möchte ich es mit vertical-align etwas anheben oder absenken.
Dazu fällt jetzt selbst mir nichts mehr ein (ausser auf Fonts mit Ober- oder Unterlängen zu verzichten)...;)
Habe es jetzt so gemacht, dass ich einen dünnen Rahmen um die Icons setze, das sieht nett aus und dadurch spielen sowohl die unterschiedlichen Höhen als auch Größen keine Rolle mehr.
Sven
@@Sven
ich tausche gerade meine Gif-Icons aus den 2000er Jahren gegen Font-Awesome-Icons aus.
Das machst du wie? Als Iconfont oder als SVGs? Wenn letzteres: gut so. Wenn ersteres: nicht machen! Verwende SVGs.
Und an eine Textalternative für die Icons hast du auch gedacht (wenn du die Icons ohne Text dazu verwendest)?
Falsch:
<button>
<i class="fa-solid fa-pen"></i>
</button>
Richtig:
<button>
<span aria-hidden="true" class="fa-solid fa-pen"></span>
<span class="visually-hidden">Bearbeiten</span>
</button>
mit der in How-to hide content gezeigten Regel für .visually-hidden, wenn der Text nicht visuell angezeigt werden soll.
Erwähnte ich schon, dass du SVGs verwenden solltest?
Nun besteht aber das Problem, dass diese fa-Icons etwas unterschiedlich groß wirken und auch in Höhe nicht komplett auf einer Linie stehen, wenn ich mehrere hintereinander einsetze.
Huch? Die Icons sollten doch eigentlich so gestaltet sein, dass sie zueinander passen? 🤔
🖖 Живіть довго і процвітайте
Hallo Gunnar,
Das machst du wie? Als Iconfont oder als SVGs? Wenn letzteres: gut so. Wenn ersteres: nicht machen! Verwende SVGs.
Erwähnte ich schon, dass du SVGs verwenden solltest?
Kannst Du mir erklären, warum?
und auch,m wie ich die verwende?
Denn im Moment mache ich das einfach so (fa 4.7, ich glaube, das gibt es keine SVGs):
<i class='aktiv_20 fa fa-map-marker' style=''>
Huch? Die Icons sollten doch eigentlich so gestaltet sein, dass sie zueinander passen? 🤔
Ja, schön wärs.
Das mit dem "alt-Text" muss ich mir auch genauer anschauen, aber das mache ich derzeit mit einem span-Attribut.
Sven
Servus!
Hallo Gunnar,
Das machst du wie? Als Iconfont oder als SVGs? Wenn letzteres: gut so. Wenn ersteres: nicht machen! Verwende SVGs.
Erwähnte ich schon, dass du SVGs verwenden solltest?
Kannst Du mir erklären, warum?
Weil's die sauberste Technik ist!
und auch,m wie ich die verwende?
Denn im Moment mache ich das einfach so (fa 4.7, ich glaube, das gibt es keine SVGs):
Dann nimm eine modernere Version:
"6.3.0 for the desktop
Everything needed to use Font Awesome via text layers or SVGs in desktop apps."
<i class='aktiv_20 fa fa-map-marker' style=''>Huch? Die Icons sollten doch eigentlich so gestaltet sein, dass sie zueinander passen? 🤔
Ja, schön wärs.
Das mit dem "alt-Text" muss ich mir auch genauer anschauen, aber das mache ich derzeit mit einem span-Attribut.
Sven
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
Kannst Du mir erklären, warum?
Weil's die sauberste Technik ist!
Das reicht mir als Erklärung nicht.
Dann nimm eine modernere Version:
"6.3.0 for the desktop
Warum die Desktop?
ich hatte heute die 6.3 fürs Web genommen, aber die lieferte mir permanent Hyroglyphen aus, anstelle von Icons.
Deshalb habe ich dann meine alte 4.7 weider verwendet.
Sven
Servus!
Hallo Matthias,
Kannst Du mir erklären, warum?
Weil's die sauberste Technik ist!
Das reicht mir als Erklärung nicht.
Schau bitte in das verlinkte Tutorial. Da haben @Gunnar Bittersmann und ich alles dazu geschrieben.
Dann nimm eine modernere Version:
"6.3.0 for the desktop
Warum die Desktop?
ich hatte heute die 6.3 fürs Web genommen, aber die lieferte mir permanent Hyroglyphen aus, anstelle von Icons.
Deshalb habe ich dann meine alte 4.7 weider verwendet.
War nur die schnellste Suche; versuch doch mal ne Version zu finden, in der die SVGs vorhanden sind.
Bei den SVGs nimmst Du dann nur die paar Icons, die du brauchst und nicht die ganze Bibliothek.
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
Schau bitte in das verlinkte Tutorial.
Öhm, Tutorial würde ich das, was du da verlinkt hast, nicht nennen.
🖖 Живіть довго і процвітайте
@@Sven
Erwähnte ich schon, dass du SVGs verwenden solltest?
Kannst Du mir erklären, warum?
und auch,m wie ich die verwende?
Du gehst zu Downloads und lädst dir das Paket runter. Aus den SVG-Dateien kannst du dir die Pfade und viewBox-Größen für die benötigten Icons rausholen.
Da du die Icons mit CSS färben möchtest, müssen die SVGs inline im HTML sein und auf fill="currentColor" gesetzt sein, dann übernehmen sie die Textfarbe: inline SVGs.
Wenn ein Icon mehrfach auftritt, ist es natürlich blöd, jedesmal den SVG-Code dafür zu duplizieren. Du kannst auch alle Icons als symbols in ein svg-Element tun und von dort referenzieren: SVG symbols.
Das kannst du auch in eine externe SVG-Ressource auslagern, wie auf dieser Testseite gezeigt. (Wegen CORS-Gedöns nicht als Codepen.)
fa 4.7, ich glaube, das gibt es keine SVGs
Ich glaube, Fontawesome bietet die SVGs zu den Icons schon seit längerem an. Die heben das bloß nicht so hervor; man muss wissen, wonach man suchen muss.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
erstmal vielen lieben dank für die lange und verständliche Erklärung, das hat mir schon gut weiter geholfen.
Auch die Links zu den Vor- bzw. Nachteilen von SVG vs. Icon-Fonts haben mich überzeugt.
Wenn ein Icon mehrfach auftritt, ist es natürlich blöd, jedesmal den SVG-Code dafür zu duplizieren. Du kannst auch alle Icons als
symbols in einsvg-Element tun und von dort referenzieren: SVG symbols.
Kannst Du mir bei diesem Beispiel noch 2 Dinge erklären?
Das kannst du auch in eine externe SVG-Ressource auslagern, wie auf dieser Testseite gezeigt. (Wegen CORS-Gedöns nicht als Codepen.)
Auch hier habe ich eine Rückfrage. Werden die einfach in eine file.svg ausgelagert? Wie wird die Datei eingebunden? Über das href-Attribut?
fa 4.7, ich glaube, das gibt es keine SVGs
Ich glaube, Fontawesome bietet die SVGs zu den Icons schon seit längerem an. Die heben das bloß nicht so hervor; man muss wissen, wonach man suchen muss.
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.
Noch eine Frage habe ich, wie würde eine SVG-Grafik eingebunden, wenn ich sie in einem Input-Element oder einem Button bräuchte?
Grüße, Sven
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
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
Hallo
Du kannst dir zum Beispiel auf icomoon.io ein deinen Bedürfnissen angepasstes Iconset zusammenstellen …
Ist wirklich etwas schwierig und zeitaufwändig, sich Icons zusammen zu setzen, die zueinader passen.
Ja, der Grafikstil kann schon sehr unterschiedlich sein. Allerdings spricht nichts dagegen, Icons aus nur einem Set auszuwählen. Das ist halt einmal Denk- und Klickarbeit.
Tschö, Auge
@@Sven
Kannst Du mir bei diesem Beispiel noch 2 Dinge erklären?
- Wohin käme hier der title, bzw. der description-tag?
In die svg-Elemente mit den use-Elementen: SVG symbols, titles.
Das sollte dann auch der Alternativtext für die Grafiken sein. Die Ups & Downs hab ich aus dem Text entfernt, damit sich das nicht doppelt.
Das title-Element erzeugt (wie auch das title-Attribut in HMTL) beim Hovern mit der Maus ein Tooltip – das sollte nicht stören, sondern sogar hilfreich sein.
- Ich verstehe die viewBox="0 0 1 1"-Angabe im svg-tag nicht. Warum ist die nötig?
Da das use-Element ohne Angaben von x und y an die Stelle (0, 0) plaziert wird, sollte viewBox auch dort beginnen, damit’s passt. 1 1 ist Breite und Höhe, also eine qudratische Grafik. Wichtig ist nur das Seitenverhältnis, du kannst genauso gut viewBox="0 0 666 666" angeben.
Das kannst du auch in eine externe SVG-Ressource auslagern, wie auf dieser Testseite gezeigt. (Wegen CORS-Gedöns nicht als Codepen.)
Auch hier habe ich eine Rückfrage. Werden die einfach in eine file.svg ausgelagert? Wie wird die Datei eingebunden? Über das href-Attribut?
Ja, das war doch auf der Testseite im Quelltext zu sehen. href mit Pfad zur SVG-Ressource und fragment identifier nach dem #.
Früher hätte es das xlink:href-Attribut aus dem XLink-Namensraum sein gemusst (in Safari auch unbedingt mit Präfix xlink, IIRC); heute kommen alle Browser mit href ohne Namensraum klar.
Ich habe Fontawesome jetzt einfach mal komplett außen vor gelassen, weil die die svg-Vectoren bevorzugt über JS einbinden wollen.
?? Ich verstehe nicht, was du meinst.
Ich suche mir im Netz die SVGs zusammen, die freie Lizenzen (z.b. MIT) haben
Die Fontawesome-Icons sind doch auch frei?
und kopiere mir dort die entsprechenden Pfade.
Hm, dann hast du eher das Problem, dass Icons nicht zueinander passen, als wenn du alle Icons aus einer Quelle nimmst.
Noch eine Frage habe ich, wie würde eine SVG-Grafik eingebunden, wenn ich sie in einem Input-Element oder einem Button bräuchte?
In einem input-Element: gar nicht. input darf keinen Inhalt haben.
🖖 Живіть довго і процвітайте
Hi Gunnar,
nur kurz zur Info, vielen Dank für Deine Antwort, ich antworte morgen darauf, bin gad auf dem Sprung.
Sven
Hallo Gunnar Bittersmann,
Wichtig ist nur das Seitenverhältnis, du kannst genauso gut viewBox="0 0 666 666" angeben.
Ich habe den Thread nicht intensiv verfolgt, aber ist die viewBox in SVG nicht wichtig für die Interpretation der Koordinaten in den gezeichneten Elementen?
Wenn ich in viewBox="0 0 1 1" einen Kreis mit einem Radius von 50 zeichne, passt er da nicht rein. In eine viewBox="0 0 100 100" dagegen schon (wenn der Stroke nicht zu breit ist, jajaja).
Das hat Folgen für den Einsatz des Symbols. Ich kann ein Symbol mit viewBox="0 0 1 1" mit einer Breite und Höhe von 100px darstellen. Ist ein Kreis mit Radius 50 drin, wird der entweder geclippt oder riesengroß. Mache ich das gleiche mit viewBox="0 0 100 100", bekomme ich einen Kreis mit 100px Durchmesser.
Oder ist das in diesem Kontext hier nicht relevant?
Rolf
@@Rolf B
Wichtig ist nur das Seitenverhältnis, du kannst genauso gut viewBox="0 0 666 666" angeben.
Ich habe den Thread nicht intensiv verfolgt, aber ist die viewBox in SVG nicht wichtig für die Interpretation der Koordinaten in den gezeichneten Elementen?
Wenn ich in viewBox="0 0 1 1" einen Kreis mit einem Radius von 50 zeichne, passt er da nicht rein. In eine viewBox="0 0 100 100" dagegen schon (wenn der Stroke nicht zu breit ist, jajaja).
Das hat Folgen für den Einsatz des Symbols. Ich kann ein Symbol mit viewBox="0 0 1 1" mit einer Breite und Höhe von 100px darstellen. Ist ein Kreis mit Radius 50 drin, wird der entweder geclippt oder riesengroß. Mache ich das gleiche mit viewBox="0 0 100 100", bekomme ich einen Kreis mit 100px Durchmesser.
Oder ist das in diesem Kontext hier nicht relevant?
Es wäre relevant, wenn beim use-Element width-/height-Attribute angegeben wären. Ohne diese Angaben wird so skaliert, dass es reinpasst. Da sich Firefox und Chromia diesbezüglich gleich verhalten, denke ich, dass das so spezifiziert ist. Ich muss aber gestehen, dass ich das in der Spec nicht gefunden habe.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
Kannst Du mir bei diesem Beispiel noch 2 Dinge erklären?
- Wohin käme hier der title, bzw. der description-tag?
In die
svg-Elemente mit denuse-Elementen: SVG symbols, titles.Das sollte dann auch der Alternativtext für die Grafiken sein. Die Ups & Downs hab ich aus dem Text entfernt, damit sich das nicht doppelt.
Das
title-Element erzeugt (wie auch dastitle-Attribut in HMTL) beim Hovern mit der Maus ein Tooltip – das sollte nicht stören, sondern sogar hilfreich sein.
Alles klar, danke.
Leider kommen sich die Title-Hover-Tooltips mit meinen eigenen etwas ins Gehege. Das wirkt dann manchmal etwas überladen.
Auch hier habe ich eine Rückfrage. Werden die einfach in eine file.svg ausgelagert? Wie wird die Datei eingebunden? Über das href-Attribut?
Ja, das war doch auf der Testseite im Quelltext zu sehen.
hrefmit Pfad zur SVG-Ressource und fragment identifier nach dem#.
Hatte ich gesehen. Ich war nur etwas überrascht.
Früher hätte es das
xlink:href-Attribut aus dem XLink-Namensraum sein gemusst (in Safari auch unbedingt mit Präfixxlink, IIRC); heute kommen alle Browser mithrefohne Namensraum klar.
Danke für die Aufklärung, ich hatte das xlink:href`-Attribut tatsächlich auch gefunden und da Beides funktionierte, war ich mir nicht sicher, welches man denn nehmen muss.
Ich habe Fontawesome jetzt einfach mal komplett außen vor gelassen, weil die die svg-Vectoren bevorzugt über JS einbinden wollen.
?? Ich verstehe nicht, was du meinst.
Ich hatte auf der FA-Seite nur den Hinweis zum Einbinden über JS gefunden.
Aber ok, im Download sind auch die Sprite-Files enthalten.
Ich suche mir im Netz die SVGs zusammen, die freie Lizenzen (z.b. MIT) haben
Die Fontawesome-Icons sind doch auch frei?
und kopiere mir dort die entsprechenden Pfade.
Hm, dann hast du eher das Problem, dass Icons nicht zueinander passen, als wenn du alle Icons aus einer Quelle nimmst.
Ehrlicherweise passen oft auch die SVGs aus einem einzigen Set nicht zusammen. Egal, ich habe die Icons, die ich brauche, weitestgehend in den letzten Tagen gefunden und bin ganz zufrieden damit.
Sven