Einzelnen Beitrag anzeigen
  #6 (permalink)  
Alt 20.07.2022, 19:33
Geki0815 Geki0815 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.07.2022
Beiträge: 4
Geki0815 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Kannst du das HTML für das CSS auch noch posten?
Zitat:
Zitat von top Beitrag anzeigen
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


Vielen Dank für deine Anregungen
Ich habe die Icons verkleinert und deine Lösung ausprobiert. Funktioniert einwand frei. Danke
Mit Zitat antworten