Reload und Stop Buttons

Bei mir funktioniert das hier Problemlos :

/*  54_reload_tab_button.css
    210915: erster eigener Versuch, simpel und einfach => klappt irgendwie ;)  
    211012: diverse Anpassungen, auch beim neu laden isser bunt und bewegt sich ;)
*/

#reload-button {
    list-style-image: url('../icons/Refresh.svg') !important;
}

#TabsToolbar #reload-button > image,
#reload-button > image:hover{
    border: 2px solid !important;                          /* Rahmen setzen */
    border-radius: 8px /* 5px 5px 5px */ !important;    /* Runde Ecken */
    color: black !important;                              /* Farbe des Rahmens  */           
    background: gold !important;                           /* Hintergrundfarbe */
    margin: 6px  -2px  1px   2px  !important;              /* Gesamtgröße des Buttons und relative Lage ?*/
/*         oben, rechts, unten, links */                    /* sagt Sören ;) */
    padding: 3px 2px  4px   2px !important;
}

#stop-button {
    list-style-image: url('../icons/ajax-loader2.gif') !important;
}

#TabsToolbar #stop-button > image,
#stop-button > image:hover {
    border: 2px solid !important;                          /* Rahmen setzen */
    border-radius: 8px /* 5px 5px 5px */ !important;    /* Runde Ecken */
    color: black!important;                              /* Farbe des Rahmens  */           
    background: gold !important;                           /* Hintergrundfarbe */
    margin: 6px -2px 1px 2px !important;                  /* Gesamtgröße des Buttons und relative Lage ?*/
    border: 2px dotted black !important;
    padding: 3px 2px  4px   2px !important;
}

Vielleicht hilfts Dir ja weiter

Das .gif:

Ich habe deine animierten Bilder schon gesehen, und auch gesehen, dass immer wieder das originale SVG angezeigt wird. Das liegt bzw. lag an deinem CSS - du hast dein Bild als Hintergrund eingestellt und das Listensymbol ausgeblendet, und noch anderes CSS hinzugefügt. Deswegen hatte ich nochmal betont, was geändert werden muss, die anderen haben es ja auch geschrieben. Ich war auch in den Browser-Werkzeuge und die haben es mir bestätigt, und auch das bestätigt, was grisu schrieb. Daher musste irgendwas bei dir nicht passen. Hast du wie empfohlen dein CSS sortiert?

SVG ist eine Vektorgrafik. Das hatten wir neulich erst.

Beitrag

RE: in Adressleiste Stern als Bild

[…]

Je kleiner die Dateigröße, desto besser. Also wenn du dich schon für ein Pixelformat wie PNG entscheidest, dann kannst du auch WebP oder AVIF verwenden. Ansonsten lassen sich auch PNG- und JPEG-Grafiken häufig ohne Qualitätsverlust signifikant in ihrer Dateigröße reduzieren. Ich nutze dafür das Tool ImageOptim, aber das gibt es nur für macOS. Für Windows gibt es aber mit Sicherheit vergleichbare Tools.

Für ICO fällt mir in diesem Zusammenhang ehrlich gesagt gar kein Argument ein. Das Format…

Sören Hentzschel

31. Oktober 2021 um 14:53

Kann man auch in jedem besseren Notepad öffnen.

Deine Bilder sind "komisch". Rote Ecken, helle Mitte, Kringel in Weiss, aber irgendwie alles pixelig. Originalgröße 16x16. Daher kann es nur pixelig werden. Idealerweise erstellt man es wesentlich größer und skaliert es runter, wobei das zu einer Unschärfe führen kann, ich kenne das von Icons. 48x48 oder 64x64 und dann mit width/height: 16px.

Das entfällt alles bei SVG, das ist immer scharf, weil gezeichnet.

PNG ist hier pauschal immer mit transparentem Hintergrund, das muss das Zeichen-/Grafikprogramm aber können. Ich weiss nicht, ob PhotoFiltre das so kann. In Photoshop würde man ein PSD erstellen und als PNG und skaliert speichern. Das ist aber auch noch kein scharfes SVG.

Das Bild:

#reload-button {
    list-style-image: url("chrome://global/skin/icons/reload.svg");
}

Und so wäre es in Weiss, Hintergrund immer noch Transparent, müsstest du als CSS in Rot hinterlegen

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="#ffffff" fill-opacity="context-fill-opacity">
  <path d="M10.707 6 14.7 6l.3-.3 0-3.993a.5.5 0 0 0-.854-.354l-1.459 1.459A6.95 6.95 0 0 0 8 1C4.141 1 1 4.141 1 8s3.141 7 7 7a6.97 6.97 0 0 0 6.968-6.322.626.626 0 0 0-.562-.682.635.635 0 0 0-.682.562A5.726 5.726 0 0 1 8 13.75c-3.171 0-5.75-2.579-5.75-5.75S4.829 2.25 8 2.25a5.71 5.71 0 0 1 3.805 1.445l-1.451 1.451a.5.5 0 0 0 .353.854z"/>
</svg>

fill="#ffffff" statt fill="context-fill"