Icon im Block ändern

[scherenschlag]

Moin.
Frage.
Auf der unten angegebenen Seite sind unsere Sponsoren aufgeführt.
Vor den Sponsoren ist ein blauer, nach unten zeigender Pfeil.
Wenn ich das richtig sehe, ist dass der content:"\2193"

Code: Alles auswählen

ul li::before {
  position: absolute;
  content: "\2193";
  left: -61px;
  top: -15px;
  color: @colorArrow;
  font-weight: bold;
  font-size: 2rem;
  width: 1.6rem;
  @media (max-width: 768px) {
    top: -5px;
  }
}

Ich würde jetzt aber lieber einen z.B. Fußball dafür einfügen.
Nur: Welche Nummer hat der Fußball in meinem Icon Paket? Wo finde ich die? Oder läuft das anders?

https://tsad17.de/BSV2022/unterstuetzung.html#Sponsoren

[Tommy Herrmann]

Moin,

ja - das ist der Unicode für dieses Sonderzeichen mit dem Pfeil nach unten.

Klicke doch einfach auf den Pfeil mal drauf, dann öffnet sich der Icon-Editor von Mobirise mit Tausenden von Icons. Gib mal bei der Suche "ball" ein und gucke was Du finden kannst. Es gibt auch einige Fußbälle.

... oder trage das z.B. für einen Fußball in der CSS, anstelle des Pfeils, ein:

Code: Alles auswählen

content: "\26BD";

[scherenschlag]

Hi Tommy.
Das mit dem draufklicken hatte ich schon versucht.
Aber da passiert halt nichts. Man kommt nicht in die Icons von MBR.
Das muss irgendwie mit der Verlinkung zu tun haben.
Denn wenn ich auf den Pfeil klicke wird der Firmenname markiert. Mit der Möglichkeit der Link Eingabe und Farbe.

[Tommy Herrmann]

... ich weiß jetzt nicht welcher Block aus welchem Thema das ist.

Offensichtlich steht ja der Wert des Sonderzeichens in der CSS. Ich habe Dir doch den Fußball bereits dort eingetragen.



Du kannst auch mal im Internet suchen nach:

"HTML Ersatzzeichen"

Da gibt es sicherlich auch Bälle. Auch unser Werner.Zenk.de hat da 3 Seiten mit Sonderzeichen (habe aber nicht gesucht):

https://werner-zenk.de/html/unicode-tabelle.php

[scherenschlag]

Alles klar. Habe deinen Code ja auch schon probiert.

[Tommy Herrmann]

... es spricht ja eigentlich nichts dagegen an dieser Stelle lieber das Bild vom Fußball einzufügen

Code: Alles auswählen

<img style="width: 30px;" src="https://tsad17.de/BSV2022/assets/images/ball2022-199x198.png" alt="Ball">

... wenn ich den Block wüsste, könnte ich das auch besser positionieren - oder Du probierst das mal.

Natürlich muss dann dieses Unicode-Ball-Zeichen da vorher raus:

[Tommy Herrmann]

Du könntest auch die CSS insofern ändern, dass Du dort den Ball als Hintergrundbild, anstelle des Unicode-Symbols einträgst:

Code: Alles auswählen

ul li::before {
  position: absolute;
  left: -80px;
  content: "";
  width: 30px;
  height: 30px;
  background: url(https://tsad17.de/BSV2022/assets/images/ball2022-199x198.png) no-repeat 0 0;
  background-size: 80%;
}

[scherenschlag]

Danke für den Tipp......