Einzelnen Beitrag anzeigen
  #3 (permalink)  
Alt 20.07.2022, 09:59
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

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);
}
Edit:

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)
Mit Zitat antworten