23. Februar 2023

Download-Links mit passenden Icons

Download-Links können ganz einfach automatisch mit passenden Icons gekennzeichnet werden – ganz ohne PHP oder JavaScript, sondern nur mit CSS. In diesem Beispiel mit Hilfe von Font Awesome.

p a[href*=".pdf"]:before {
    font-family: 'FontAwesome';
    content: '\f1c1';
    margin: 0 10px 0 0;
    color: var(--color-2);
}

p a[href*=".doc"]:before, p a[href*=".docx"]:before {
    font-family: 'FontAwesome';
    content: '\f1c2';
    margin: 0 10px 0 0;
    color: var(--color-2);
}

p a[href*=".zip"]:before {
    font-family: 'FontAwesome';
    content: '\f1c6';
    margin: 0 10px 0 0;
    color: var(--color-2);
}

---

CSS

---

---

Nächster Artikel
Icon-Fonts und SVG-Icons