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