Phone icon wird als Pseudo-Element nicht angzeigt, im Kontakt-i-tag hingegen ja
- Maria
-
Autor
- Fresh Boarder
-
- Beiträge: 16
- Dank erhalten: 0
Phone icon wird als Pseudo-Element nicht angzeigt, im Kontakt-i-tag hingegen ja wurde erstellt von Maria
Hallo!
Joomla: 5.1.0
Framework Version: 3.0.14
Template: Time
Template Version: 1.3.17
Uikit: 4.0.5.
Ich bin noch in der Entwicklungsphase; könnte einen Link und PW nur per PM übermitteln.
Ich möchte einem Link zu einer Telefonnummer (<a href="tel:0123456789">…) per Pseudo-Element ein Telefonhörer-Icon voranstellen. Z. B. , "\f879" (fa-phone-alt).
Dieses wird mir z. B. in den Kontaktinformationen angzeigt, wenn ich diese unter Miscellaneous --> Contact Information aktiviere und als Modul anzeigen lasse.
Als content der Pseudo-Klasse hingegen, wird nur das Zeichen für ein nicht gefundenes Zeichen des fonts angezeigt.
Für fa-envelope hingegen, "\f0e0", funktioniert es.
Hier mein CSS:
Mir ist aufgefallen, dass ich beispielsweise einen per Framework nirgendwo ausgewählten Google-Font, einem Element auch nicht zuweisen kann.
Weise ich den Font hingegen z. B. der Überschrift h6 zu (ohne sie tatsächlich zu benutzen), wird der Font auch per Klasse gefunden.
Leider funktioniert das nicht, wenn ich die Kontaktinformationen verwende.
Woran könnte das liegen?
Vielen Dank.
Joomla: 5.1.0
Framework Version: 3.0.14
Template: Time
Template Version: 1.3.17
Uikit: 4.0.5.
Ich bin noch in der Entwicklungsphase; könnte einen Link und PW nur per PM übermitteln.
Ich möchte einem Link zu einer Telefonnummer (<a href="tel:0123456789">…) per Pseudo-Element ein Telefonhörer-Icon voranstellen. Z. B. , "\f879" (fa-phone-alt).
Dieses wird mir z. B. in den Kontaktinformationen angzeigt, wenn ich diese unter Miscellaneous --> Contact Information aktiviere und als Modul anzeigen lasse.
Als content der Pseudo-Klasse hingegen, wird nur das Zeichen für ein nicht gefundenes Zeichen des fonts angezeigt.
Für fa-envelope hingegen, "\f0e0", funktioniert es.
Hier mein CSS:
a[href^="tel:"] {
position: relative;
}
a[href^="tel:"]::before {
content: "\f879";
color: white;
display: inline-block;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}Mir ist aufgefallen, dass ich beispielsweise einen per Framework nirgendwo ausgewählten Google-Font, einem Element auch nicht zuweisen kann.
Weise ich den Font hingegen z. B. der Überschrift h6 zu (ohne sie tatsächlich zu benutzen), wird der Font auch per Klasse gefunden.
Leider funktioniert das nicht, wenn ich die Kontaktinformationen verwende.
Woran könnte das liegen?
Vielen Dank.
- WM-Loose
-
- Moderator
-
- Beiträge: 1574
- Dank erhalten: 285
- Maria
-
Autor
- Fresh Boarder
-
- Beiträge: 16
- Dank erhalten: 0
- WM-Loose
-
- Moderator
-
- Beiträge: 1574
- Dank erhalten: 285
- Maria
-
Autor
- Fresh Boarder
-
- Beiträge: 16
- Dank erhalten: 0
- WM-Loose
-
- Moderator
-
- Beiträge: 1574
- Dank erhalten: 285