Hallo, Besucher der Thread wurde 486 aufgerufen und enthält 3 Antworten

letzter Beitrag von Belarus am

[CSS] Font Awesome Icons mit Farbverlauf

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

Letzte Beiträge Ticker Box Content

    Hallo,


    viele nutzen und lieben sie: Die Font-Awesome Icons. Manche in einem schlichten weiß gehalten und andere wiederum in rot, blau oder grün eingefärbt. Doch es geht auch mit einem Farbverlauf (Gradient), mit welchen sich die Icons um das i-Tüpfelchen aufwerten lassen und das sogar recht einfach.


    Features

    • Leichte Anpassung per CSS
    • Mit allen Font-Awesome Icons umsetzbar
    • Unabhängig der genutzten Font-Awesome Version







    Demo


    Eine Live Demo kann jeweils hier betrachtet werden:

    To be continued ...

    Quellcode

    HTML
    <i class="fab fa-buffer fa-2x"
    style="color: #9c47fc;
    background: -webkit-linear-gradient(top, #0d8400 0%,#8c3310 60%,#752201 68%,#d87e24 69%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;"></i>

    Info: Im Beispiel wurde Font-Awesome 5 verwendet. Jedoch funktioniert dies auch mit allen anderen Font-Awesome Versionen.


    Benutzung

    1. Font-Awesome Icon auswählen und an gewünschter Stelle einfügen
    2. Innerhalb des <i>-Tags per style="..." Anweisung den Farbverlauf bestimmen
      Empfehlung dazu: Colorzilla.com: Gradient Editor
    3. Die Richtung des Farbverlaufs angeben (vom Icon abhängig)
    4. Den Farbverlauf des Icons mittels %-Angaben anpassen
    5. Fertig!

    Hinweis

    Mit ausgelagertem CSS und entsprechender Anweisung auf die Font-Awesome Klasse wie z.B. .fab fa-buffer funktioniert leider nicht, so dass der Style mittels style="...." direkt im Quellcodes des <i>-Tags vorgenommen werden muss.

    Lizenz

    Die Font-Awesome Icons unterliegen ihrer eigenen Lizenz.

    Was den Codebeispiel hier betrifft, so ist dieser Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

    Screenshots


    Bei den abgebildeten Screenshots handelt es sich nur um wenige Beispiele. Mehr können unter dem Links zur Demo angesehen und mittels copy&paste für Dein Projekt genutzt werden. Beachte bitte das die hier abgebildeten Icons der Font-Awesome 5 Version entnommen sind. Beispiele zur 4.7 Version von Font-Awesome können unter den entsprechenden Link zur Demo betrachtet werden.


    Viel Spaß damit ;)


    Gruss,
    Andreas

    Hi,


    habe ich ausprobiert, bekomme leider eine Fehlermeldung, wahrscheinlich bin ich zu blöd


    <i class="fab fa-bell fa-2x"

    style="color: #9c47fc;

    background: -webkit-linear-gradient(top, #0d8400 0%,#8c3310 60%,#752201 68%,#d87e24 69%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;"></i>


    Gruß

    acha

    Hallo achalesas

    bei Dir liegt der Fehler Offensichtlich in der Hand. Denn es sollte nicht fab fa-bell sondern für Font-Awesome 5 fas fa-bell bzw. für die Font-Awesome 4.7 fa fa-bell heißen. ;)


    Wie im ersten Beitrag genannt, wurden für mein Beispiel die Font-Awesome 5 Icons genutzt. Vergewissere Dich entsprechend welche Version Du benutzt, denn je nach Version werden die Icons mit unterschiedlichen Klassen aufgerufen. Standardgemäß nutzt die Woltlab Suite nämlich nur die 4.7 und nicht die 5er Version der Font-Awesome Icons. Wenn Du jedoch die Font-Awesome 5 Icons nutzen möchtest, so habe ich dazu bereits eine Anleitung geschrieben - siehe hier: Font Awesome 5 ;)

    Unterschiede

    Font-Awesome 4.7Font-Awesome 5
    Icon
    Klassefa fa-bellfas fa-bell
    Code<i class="fa fa-bell" aria-hidden="true"></i><i class="fas fa-bell"></i>
    LinksHomepage / IconsHomepage / Icons


    Wie zu erkennen unterscheidet sich die Klasse beider Versionen. Bei der 4.7 werden die Icons meistens mit ein schlichten fa aufgerufen, während bei der 5er Version fas oder fab als Klasse genutzt wird. Um dies kompatibel zu älteren Versionen zu halten ist es empfehlenswert sich bei Font-Awesome kostenlos zu registrieren, ein KIt zu erstellen und dort entsprechende Einstellungen vorzunehmen, wie in meinen Beitrag zu Font Awesome 5 unter dem Punkt "Benutzung" erklärt wurde.


    Gruss,
    Andreas


    PS: Benutze doch bitte zur Anzeige des Codes den entsprechenden BB-Code für Codes. Danke!

    • Gäste Informationen


    Hallo Gast,
    gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du das Forum uneingeschränkt nutzen.

    Dieses Thema enthält einen weiteren Beitrag, der nur für registrierte Benutzer sichtbar ist, bitte registriere dich oder melde dich an um diesen lesen zu können.
  • Dieses Thema enthält einen weiteren Beitrag, der nur für registrierte Benutzer sichtbar ist, bitte registriere dich oder melde dich an um diesen lesen zu können.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!