Dann aber bitte wieder eine ganz einfache Variante zum Anpassen nachträglich.
.reactButton {
&::before {
content: '\f004' !important;
}
}Solange du dich an einem der über 2.000 kostenlosen Icons von Font Awesome bedienst, musst du lediglich das obige Code-Beispiel verwenden und den content-Wert anpassen. Klicke auf der Website das gewünschte Icon an und du siehst oben rechts den vierstelligen Unicode, der per Klick kopiert wird.
Solange du dich an..
Hallo Sören, damit bin ich mehr als zufrieden, danke
.reactButton {
&::before {
content: '\f164' !important;
}
}
.reactButton {
width: 120px !important;
}
.reactButton::after {
content: "Gefällt mir" !important;
padding-left: 5px !important;
}Da habe ich dir das schon so schön verschachtelt und dann nutzt du das nicht für deine eigene Anpassung … 
.reactButton {
width: 120px !important;
&::before {
content: '\f164' !important;
}
&::after {
content: 'Gefällt mir' !important;
padding-left: 5px !important;
}
}
Kann mir jemand das '\f164' erklären, bitte,
und wie ich dann das Symbol z.B. in der Größe verändere?
Da habe ich dir das schon so schön verschachtelt
Ach Sören, ich muss halt noch viel lernen.
Danke auch für den letzten Code, habe ich so übernommen und hoffe, nächstes Mal daran zu denken.
das Symbol z.B. in der Größe verändere?
Z.B. per Scale:
.reactButton {
width: 120px !important;
&::before {
content: '\f164' !important;
scale: 1.5 !important;
}
&::after {
content: 'Gefällt mir' !important;
padding-left: 5px !important;
}
}Ok, aber wo kommt '\f164' her, bzw. wie setzt sich der Code zusammen?
Was muss ich machen, wenn ich z.B. ein Symbol von meiner Festplatte einbinden will.
oder ein Symbol, dass per url('data:image/svg+xml,<svg xmlns=.....)?
Ich komme mir gerade ziemlich ... vor die Wand gewetzt vor.
abe wo kommt '\f164' her,
Beitrag #41 gelesen (und verstanden)?
abe wo kommt '\f164' her,
Beitrag #41 gelesen (und verstanden)?
Ja habe ich! Aber wohl nicht richtig.
Mh, content: url('data:image/svg+xml,<svg xmlns=..... ') !important; funktioniert schon einmal nicht!
Mit background-image: url('data:image/svg+xml,<svg xmlns=..... ') !important; tut sich zwar was, aber ....
Für heute ist's genug.
aber wo kommt '\f164' her, bzw. wie setzt sich der Code zusammen?
Das ist das Unicode-Zeichen für das Daumen-Symbol in der Font Awesome Schrift. Die Website hatte ich ja verlinkt. Wie gesagt: Gewünschtes Icon anklicken, dann rechts oben den vierstelligen Unicode ablesen.
und wie ich dann das Symbol z.B. in der Größe verändere?
Der naheliegendste Weg wäre font-size, denn das ist Schrift.
Was muss ich machen, wenn ich z.B. ein Symbol von meiner Festplatte einbinden will.
oder ein Symbol, dass per url('data:image/svg+xml,<svg xmlns=.....)?
Dann musst du wie gehabt einen Weg über background-image oder mask-image wählen. Der nun umgesetzte Weg macht Gebrauch von der Icon-Schrift, die auch sonst überall hier im Forum verwendet wird und daher ohnehin mit der Software ausgeliefert wird.
Mh, content: url('data:image/svg+xml,<svg xmlns=..... ') !important; funktioniert schon einmal nicht!
Das ist ja auch kein Unicode, der wie gesagt aus vier Zeichen besteht. Möchtest du eine Grafikdatei einbinden, mach es wie vorher. Da musst du dann natürlich zusätzlich das jetzt verwendete Schrift-Symbol wieder ausblenden:
.reactButton {
&::before {
display: none;
}
}Ach Sören, ich muss halt noch viel lernen.
Gar nicht so viel. Sobald du siehst, dass du die gleichen Selektoren mehrfach schreibst, kannst du verschachteln. Wenn dein Selektor aus mehreren Teilen besteht, die durch Leerzeichen getrennt sind, sind das die jeweiligen Ebenen. Wenn zwischen Teilen kein Leerzeichen steht, wird dies in der Verschachtelung durch ein & dargestellt. Daher:
.foo {
width: 100px;
}
.foo::before {
content: '';
}
.foo .bar {
color: red;
}Identisch zu:
.foo {
width: 100px;
&::before {
content: '';
}
.bar {
color: red;
}
}Und schon musst du, wenn sich der Klassenname .foo ändert, nur noch eine Stelle im Code anpassen statt drei. Übersichtlicher ist es außerdem, weil man sofort sieht, dass das alles zusammen gehört. Das war ein einfaches Beispiel mit nur einer Ebene Verschachtelung. Du kannst aber im Prinzip beliebig viele Ebenen tief verschachteln.
...
und wie ich dann das Symbol z.B. in der Größe verändere?
Der naheliegendste Weg wäre font-size, denn das ist Schrift.
Ah, Danke.
Was muss ich machen, wenn ich z.B. ein Symbol von meiner Festplatte einbinden will.
oder ein Symbol, dass per url('data:image/svg+xml,<svg xmlns=.....)?
Dann musst du wie gehabt einen Weg über background-image oder mask-image wählen. Der nun umgesetzte Weg macht Gebrauch von der Icon-Schrift, die auch sonst überall hier im Forum verwendet wird und daher ohnehin mit der Software ausgeliefert wird.
Aha, okey.
Dann wähle ich wohl den einfacheren Weg, auch wenn damit die Möglichkeiten etwas eingeschränkter sind.
Denn
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16l-97.5 0c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8l97.5 0c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32L0 448c0 17.7 14.3 32 32 32l64 0c17.7 0 32-14.3 32-32l0-224c0-17.7-14.3-32-32-32l-64 0z"/></svg>lässt sich dann ja nur über background-image oder mask-image auswählen.
Dann wähle ich wohl den einfacheren Weg, auch wenn damit die Möglichkeiten etwas eingeschränkter sind.
Naja, mehr als 2.000 Icons Auswahl. Da sollte normalerweise doch etwas Passendes dabei sein.
lässt sich dann ja nur über background-image oder mask-image auswählen.
Das Beispiel verstehe ich allerdings nicht. Denn laut Copyright-Angabe im Code stammt das Icon doch von Font Awesome. Du kannst jedes beliebige der über 2.000 kostenlosen Icons aus Font Awesome durch einen Austausch von nur vier Zeichen verwenden. Wenn ich mir deine SVG-Grafik ansehe, ist es sogar exakt das Icon, welches im Beispiel von Andreas verwendet wird. Das ist also ein Beispiel dafür, wo du eben nicht background-image oder mask-image verwenden musst, sondern ohne Nachteil den jetzt viel einfacheren Weg wählen kannst.
Der naheliegendste Weg wäre font-size, denn das ist Schrift.
Mira_Belle Zur Erläuterung: Der Unicode-Standard kennt drei private Bereiche. In diesen Bereichen sind zwar Belegungen für die Zeichen definiert, aber das sind nur Platzhalter, nur die Codes. Sie vertreten standardmäßig kein Zeichen. Das bietet die Möglichkeit, Zeichen nach Gutdünken zu definieren. Dies macht die Website Font Awesome und bietet dann ihre Zeichensymbole an. Einer der privaten Bereiche geht von E000 bis F8FF. Der Zeichencode F164 fällt also in diesen Bereich. Font Awesome hat das Symbol thumbs-up (Daumen hoch) darauf gelegt.
Diese Codes siehst du auch, wenn du mal den Websites verbietest, ihre Schriftarten zu verwenden. Wenn ein privater Bereich verwendet wird, siehst du dann ein stehendes Rechteck mit je zwei Code-Bits drinnen. Oben im Rechteck würde hier dann F1 und unten im Rechteck 64 stehen. Sobald du dann der Website wieder erlaubst, ihre Schriftarten zu verwenden, siehst du dann wieder das Daumen-hoch-Symbol.
Diese Codes siehst du auch, wenn du mal den Websites verbietest, ihre Schriftarten zu verwenden.
Seit mehreren Jahren allerdings nur noch bei Icon-Schriften, welche nicht den dafür vorgesehenen Unicode-Bereich verwenden. Die Einstellung, um Websites die Verwendung eigener Schriftarten zu verbieten, wirkt sich ansonsten nicht mehr auf Icon-Schriften wie die von Font Awesome aus.
Seit mehreren Jahren allerdings nur noch bei Icon-Schriften, welche nicht den dafür vorgesehenen Unicode-Bereich verwenden.
Ah, danke.
Sören Hentzschel Der Unicode '\f164' ist für dieses Symbol => thumbs-up-solid.svg
Der Code in meinem Beispiel aber für dieses hier => thumbs-up-regular.svg
Beide haben aber den gleichen Unicode.
Okay, verstehe. Der Unterschied liegt im „solid“ vs. „regular“. Die ausgefüllten Icons sind „solid“, wie auch das ausgefüllte Herz, welches wir standardmäßig verwenden. Dafür wurde die font-weight auf 700 gesetzt. Du möchtest die „regular“-Version. Dafür musst du font-weight: 400 setzen.
Du kannst die font-weight auch mal ohne Icon-Änderung anpassen und schauen, was das mit dem Herz-Symbol macht.
.reactButton::before {
font-weight: 400 !important;
}Das gleiche Prinzip lässt sich auf einige Icons hier im Forum anwenden. Aber Achtung: Nicht jedes Icon steht in diesen beiden Versionen zur Verfügung. Du siehst das auf der Website von Font Awesome daran, ob dort ein „Pro“-Zusatz steht. Wenn ja, kann das hier nicht verwendet werden.
(Mein Beitrag hat sich mit den vorigen zwei Antworten überschnitten.)
Du kannst jedes beliebige der über 2.000 kostenlosen Icons aus Font Awesome durch einen Austausch von nur vier Zeichen verwenden. Wenn ich mir deine SVG-Grafik ansehe, ist es sogar exakt das Icon, welches im Beispiel von Andreas verwendet wird. Das ist also ein Beispiel dafür, wo du eben nicht background-image oder mask-image verwenden musst, sondern ohne Nachteil den jetzt viel einfacheren Weg wählen kannst.
Mit dem vierstelligen Code in content wird anscheinend ausschließlich die gefüllte Variante genutzt, auf der Website als solid bezeichnet. Mit SVG kann ich aber beispielsweise so etwas hier machen:
.messageFooterGroup .messageFooterButtons .reactButton {
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16l-97.5 0c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8l97.5 0c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32L0 448c0 17.7 14.3 32 32 32l64 0c17.7 0 32-14.3 32-32l0-224c0-17.7-14.3-32-32-32l-64 0z"/></svg>');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px;
background-color: currentColor;
&:hover {
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2l144 0c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48l-97.5 0c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3l0-38.3 0-48 0-24.9c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192l64 0c17.7 0 32 14.3 32 32l0 224c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32L0 224c0-17.7 14.3-32 32-32z"/></svg>');
--wcfButtonBackgroundActive: var(--wcfButtonTextActive);
}
&::before { content: unset }
}/* Font awesome icon "thumbs-up classic regular & solid", https://fontawesome.com/icons/thumbs-up */Die gefüllte Variante wird dann nur beim Hovern benutzt. Alternativ könnte man die gefüllte Variante anzeigen lassen, wenn man die Funktion genutzt hat.
Im Grunde möchte ich, dass es so ausschaut:
Jedoch sollte man es vermeiden, mit dem Zeiger drüberzufahren!
.messageFooterButtonsExtra > li:last-child .button {
color: #3f3f3f !important;
}
.messageFooterButtonsExtra > li:last-child .button::after {
content: "Inhalt melden" !important;
}
.messageFooterButtonsExtra > li:last-child .button:hover::after {
color: red !important;
}
.messageFooterGroup > .messageFooterButtonsExtra + .messageFooterButtons > li:first-child::after {
content: "Zitieren" !important;
margin-right: 10px !important;
font-size: 13px !important;
padding-top: 6px !important;
}
.messageFooterGroup > .messageFooterButtonsExtra + .messageFooterButtons > li:first-child:hover::after {
color: red !important;
}
.messageFooterGroup .reactButton {
-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"/></svg>') !important;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 18px !important;
background-color: #3f3f3f !important;
margin-right: 95px !important;
&:hover {
background-color: orange !important;
}
.active {
background-color: red!important;
opacity: 1 !important;
}
}
.messageFooterGroup:has(.reactButton)::after {
content: "Gefällt mir" !important;
padding-right: 20px !important;
padding-top: 8px !important;
margin-left: -95px !important;
color: #3f3f3f !important;
font-weight: bold !important;
font-size: 13px !important;
}
.messageFooterGroup:has(.reactButton):hover::after {
color: orange !important;
}Die erste Schaltfläche verhält sich normal!
Bei der zweiten Schaltfläche ist schon der Wurm drinnen, das Symbol ist unabhängig vom Schriftzug!
Des Weiteren reagiert auch der dritte Schriftzug "Gefällt mir".
Und auch bei der letzten Schaltfläche reagieren Symbol und Schriftzug ganz unabhängig voneinander.
Daher habe ich es mit weiteren Anpassungen erst einmal gelassen!
Im Grunde möchte ich, dass es so ausschaut: […] Daher habe ich es mit weiteren Anpassungen erst einmal gelassen!
Ich habe dir doch bereits die Lösung genannt? 
Bei der zweiten Schaltfläche ist schon der Wurm drinnen, das Symbol ist unabhängig vom Schriftzug!
Des Weiteren reagiert auch der dritte Schriftzug "Gefällt mir".
Und auch bei der letzten Schaltfläche reagieren Symbol und Schriftzug ganz unabhängig voneinander.
Das ist ja auch kein Wunder. Wie ich schon früher in diesem Thread schrieb: .messageFooterGroup ist die gesamte Buttongruppe. Wenn du darauf ein :hover setzt, reagiert das auch auf die gesamte Buttongruppe und nicht einen einzelnen Button.
