zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Icon vor a href tel: und mailto:

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.07.2022, 21:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.07.2022
Beiträge: 4
Geki0815 befindet sich auf einem aufstrebenden Ast
Standard 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%;
}
Die Seite, für die ich Hilfe brauche: https://turnverein-oberrotweil.com/wir-ueber-uns/
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.07.2022, 09:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Kannst du das HTML für das CSS auch noch posten?
Mit Zitat antworten
Sponsored Links
  #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
  #4 (permalink)  
Alt 20.07.2022, 10:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.07.2022
Beiträge: 4
Geki0815 befindet sich auf einem aufstrebenden Ast
Reden

Vielen Dank für die Infos. Ich werde es heute Abend gleich testen.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.07.2022, 20:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.07.2022
Beiträge: 4
Geki0815 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für deine angebotene Hilfe. Die Lösung von Top hat funktioniert.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.07.2022, 20:33
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
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:44 Uhr.