css ::after und ::before

[charlie_2011]

Hallo,

hätte da mal ne Anfängerfrage zu diesem Thema:

Im Backend habe ich eine Downloadliste mit dem Elementtyp "Downloads" angelegt.

Über das CSS habe ich das "img.mime_icon" auf display: none gesetzt. Soweit so gut.

Jetzt würde ich gerne dem Inhaltselement einen Font-Icon über die Funktion "Ein Font-Icon hinzufügen" voransetzen. Habe schon gegoggled und rumprobiert und es tut sich irgendwie nichts.

Hier mal meine CSS-Versuche:

.ce_download a, .ce_downloads a {font-size: 16px;}
.ce_download a:after, .ce_downloads a::after {content: "";}
img.mime_icon {display: none;}

Hat mir da mal jemand einen Tipp, wo mein Denkfehler liegt?

VG Charlie

[Samuell]

Contao selbst besitzt keine Funktion "Ein Font-Icon hinzufügen".
Welche Erweiterung hast Du im Einsatz?

Wenn Du es komplett mit CSS selbstm achen willst, mußt Du dem :before oder :after die entsprechende iconfont zuweisen und in content: ""; das icon eintragen.
Bei fontawesome sehen die Icons durchaus so aus "/123;"
Lass Dich davon aber nicht verwirren.

[Mr. Acylase]

Hallo Charlie,

welche Font-Icons möchtest Du einbinden (z.B. Icons von Font Awesome)? Wichtig ist dann erstmal, dass Du dir das entsprechende Icon Pack entweder direkt auf den Server lädst, dann per Link im Header verlinkst oder direkt den Link im Header auf das entsprechende Icon Pack setzt (z.B.: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> ). Im Anschluss ergänzt Du Deine CSS um folgenden Eintrag:

.beispielklasse:before
{
content: "\f046";
font-family: FontAwesome;

}

Dann sollte es eigentlich funktionieren.

Grüße
Stefan

[charlie_2011]

Hallo,

vielen Dank für eure tolle Hilfe. Nutze ein Contao-Theme von Premium Contao und dieses erweitert Contao um einen Iconpicker mit dem Font von FontAwesome. Funktioniert ansonsten problemlos. Leider jedoch nicht in diesem Fall mit den Downloadlinks.

Habe es nun über euren Vorschlag hinbekommen.

Herzlichen Dank dafür.

VG Charlie