XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Icon vor a href tel: und mailto: (http://xhtmlforum.de/showthread.php?t=74400)

Geki0815 19.07.2022 21:02

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/

cloned 20.07.2022 09:26

Kannst du das HTML für das CSS auch noch posten?

top 20.07.2022 09:59

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 8)

Geki0815 20.07.2022 10:53

Vielen Dank für die Infos. Ich werde es heute Abend gleich testen.

Geki0815 20.07.2022 20:31

Vielen Dank für deine angebotene Hilfe. Die Lösung von Top hat funktioniert.

Geki0815 20.07.2022 20:33

Zitat:

Zitat von cloned (Beitrag 555195)
Kannst du das HTML für das CSS auch noch posten?

Zitat:

Zitat von top (Beitrag 555196)
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 8)

:oops:

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


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023