Icons (awesome fonts) einbinden und animieren !

  • Hier ist ein Tutorial wo ich ein Icon von einem bestimmten Font (awesome Font) in WSX5 einbinden und per CSS formatieren und animieren will !


    Dazu benötigen wir unter diesem Link https://fortawesome.github.io/Font-Awesome/ die Download Dateien! MAn benötigt aber nur folgende Dateien um auch auf allen Geräten angezeigt zu werden.


    Den kompletten Ordner "Fonts" und im Ordner "css" die Datei "font-awesome.min.css" !
    Den Ordner "Fonts" kann man entweder komplett auf den Server spielen mit einem FTP-Programm oder man bindet die einzelnen Font Dateien unter "4" Seo&Code Reiter "Erweitert" mit "Hinzufügen" in den Ordner "fonts" (wichtig) ein ! Dann gleich die "font-awesome.min.css" Datei in den Ordner "CSS" und das Häkchen setzen bei Datei verknüpfen!



    Dann kommen wir zum Einbinden des HTML Codes wo man das animierte Icon haben will!



    Man kann den folgenden Code in ein Text-Objekt geben und wenn man will verschiedenen Text oder Beschreibung hinzufügen (HTML-Code aktivieren nicht vergessen) oder
    man gibt den Code in ein HTML-Objekt !


    HTML
    1. Wenn man das Icon verlinken will dann folgenden Code ! (keine Nummer kopieren)
    2. <a href="#"><i class="fa fa-coffee"></i></a>
    3. Wenn man nur per Mausover die Animation haben will dann diesen...
    4. <i class="fa fa-coffee"></i>

    Das Wort "coffee" steht für die Kaffeetasse und kann beliebig ersetzt werden laut Musterseite https://fortawesome.github.io/Font-Awesome/icons/


    Jetzt haben wir die Fonts eingebunden und auch angezeigt, aber natürlich noch ohne Formatierung (sieht derzeit relativ klein aus)!
    Dazu benötigen wir jetzt ein paar Zeilen CSS !




    Diesen Code entweder unter "4" Seo&Code REiter "Erweitert" vor dem </head> Tag innerhalb der Klammern <style> ... </style> eintragen ! Oder man nimmt ein TextEditor (Notepad) und speichert obigen Code in eine DAtei mit der Endung .css (z.B. custom.css) und bindet diese zu den anderen Dateien mit "hinzufügen" ein (Häkchen setzen) !



    Dieser CSS-Code ist für alle Icons die man einbindet!
    Wenn man verschiedene Icons mit verschiedenen Farben haben will muss man vor dem .fa noch den Selektor "#imCell_1" voransetzen, wobei die Nummer genommen werden muss die das Objekt hat. Dieses kann man im Quellcode der Seite feststellen (per rechtsklick auf die Seite im Browser und Quellcode anzeigen auswählen) Den gesamten Code dann natürlich sooft kopieren und einfügen wie man verschiedene animierte Buttons
    haben will.
    Viel Spass beim basteln !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von andy67 ()

  • Habe mir das Thema "awesomefonts" vorgenommen.
    Hier eine Musterseite


    Danke andy67 für das Tutorial.


    "awesomefonts" ist mächtig und erlaubt jede Menge tolle Dinge.
    Der Preis: Manuelles einbinden und viel "fummeln"


    X5 unterstützt da nix :(