Forum: Gefällt mir Button austauschen

Dankeschön, habe ich gleich mal adoptiert.

Zitat von 2002Andreas

Die Werte kann/muss sich jeder dann selber anpassen:

Sehr schön, gleich noch um einen Eintrag bei .reactButton reduziert und background-position, height und width angepasst und schon sieht es auch hier gut aus, Dankeschön.

Zitat von 2002Andreas

Hier noch das obige Icon dazu:

Guter Vorschlag, oder Variante. Danke auch von mir.

Wenn man den Knopf fürs Dankesagen benutzt hat, wird er standardmäßig eingefärbt. Es wäre sinnvoll, das zu berücksichtigen. Man müsste dazu eine Regel für .reactButton.active einführen. Wenn man eine SVG statt einer PNG (oder andere Pixelgrafik) nimmt, kann man fill für die Färbung anwenden. Einfache farblose schwarz-weiße Daumen-hoch-SVG gibt es beispielsweise bei Wikimedia Commons: Plain black SVG thumbs up icons. Es kann sein, dass das ausgewählte Symbol kein fill vorsieht, dann sollte die Deklaration -moz-context-properties: fill; hilfreich sein (zusätzlich zu fill: $Farbe$;).
Edit: O, ich sehe gerade eine dritte Möglichkeit: Das Symbol, mit dem ich eben herumexperimentieren wollte (File:Thumbs up font awesome.svg – Link zur Originaldatei), benötigt gar keine weitere Behandlung. Es reicht, die Datei einzubinden, denn man findet in der SVG diese Stilanweisung: style="fill:currentColor".

Tja, bei mir klappts noch nicht so recht..

Ich sehe beide Bildchen. Wo hakt es? Übrigens auch, wenn ich das Icon aus #1 verwende.

Der Pfad ist anonymisiert!

/* Reaktionsbutton Firefoxforum */

 @-moz-document domain("camp-firefox.de") {

 a.reactButton {
    background:url("file:///C:/Users/xxxxxx/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/Icons/Like4.svg")!important;
    margin-right: -6px !important; 
    margin-left: 10px !important;
    width: 22px !important;
    height: 26px !important;
    background-position: -3px 2px !important;
 }

 a.reactButton.active {
   filter: invert(12%) sepia(255%) saturate(4294%) hue-rotate(354deg) brightness(108%) contrast(120%)!important;
   opacity: 1 !important;
 }
 }