|
|||
Icon vor a href tel: und mailto:
Ich möchte über CSS Icon vor Telefon und Mail Links setzen.
Nun habe ich das problem, dass das Icon entweder vor und nicht zentriert vor dem Text liegt bzw. den Anfang des Textes überschreibt. Code:
a[href^="tel:"]::before{ position:inherit; content:url(/wp-content/uploads/2022/05/telefon.webp); background-repeat: no-repeat; height:1%; width:12% } a[href^="mailto:"]::before { position:absolute; background-image: url(/wp-content/uploads/2022/05/mail.webp); content:''; background-repeat: no-repeat; height:15%; width:12%; } |
Sponsored Links |
|
|||
Link zur Seite steht da doch.
Versuch es mal so: Code:
a[href^="mailto:"]::before, a[href^="tel:"]::before { position: relative; /* mit absolute würden wir die Symbole aus dem normalen Seitenfluss herausnehmen */ display: inline-block; /* Damit es sich vertikal zentrieren lässt ... */ vertical-align: middle; /* ... Was dann hier definiert wird */ margin: -0.3em 0 -0.3em 0; /* Deine Grafiken sind größer als die Zeilenhöhe, wodurch der Zeilenabstand auseinander gedrückt wird. Durch den negativen margin wird das verhindert. */ } a[href^="mailto:"]::before { content: url(/wp-content/uploads/2022/05/mail.webp); } a[href^="tel:"]::before { content: url(/wp-content/uploads/2022/05/telefon.webp); } Bei der Lösung wird vermutlich der Mobil-Test von Google ( https://search.google.com/test/mobile-friendly ) anmeckern, dass Links zu dicht beieinander liegen. Wenn dich das stört, musst du auf das negative margin verzichten. Wenn du trotzdem die zu großen Zeilenabstände vermeiden möchtest, verwende kleinere Icons. PS: Es heißt „E-Mail“! Ein „Email“ ist im deutschen etwas anderes: https://de.wikipedia.org/wiki/Email Geändert von top (20.07.2022 um 10:23 Uhr) |
|
|||
Zitat:
Vielen Dank für deine Anregungen Ich habe die Icons verkleinert und deine Lösung ausprobiert. Funktioniert einwand frei. Danke |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
fa icon von Text umfließen lassen | BallaBalla07 | CSS | 1 | 20.03.2016 02:00 |
Button Icon unscharf + nicht responsive | Adioz | CSS | 2 | 14.05.2015 09:42 |
Link mit Icon - Icon in IE falsch angezeigt bei zweizeiligem Link | jorainbo | CSS | 4 | 02.07.2008 19:00 |
Icon über HTML-Elemente | gelleneu | (X)HTML | 1 | 16.09.2007 19:58 |
Icon vor Link | wenn Zeilenumbruch verschwindet Icon | NicolaibassDH | CSS | 0 | 28.03.2007 15:14 |