Seite 1 von 1
Icon im Block ändern
Verfasst: Mo 21. Feb 2022, 13:05
von 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
Re: Icon im Block ändern
Verfasst: Mo 21. Feb 2022, 14:10
von 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:
Re: Icon im Block ändern
Verfasst: Mo 21. Feb 2022, 14:34
von 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.
Re: Icon im Block ändern
Verfasst: Mo 21. Feb 2022, 16:51
von 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
Re: Icon im Block ändern
Verfasst: Di 22. Feb 2022, 15:52
von scherenschlag
Alles klar. Habe deinen Code ja auch schon probiert.
Re: Icon im Block ändern
Verfasst: Di 22. Feb 2022, 16:36
von 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:
Re: Icon im Block ändern
Verfasst: Mi 23. Feb 2022, 07:20
von 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%;
}
Re: Icon im Block ändern
Verfasst: Mi 23. Feb 2022, 09:50
von scherenschlag
Danke für den Tipp......
