Icons (awesome fonts) einbinden und animieren !

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • 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 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-Quellcode

      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 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 !


      CSS-Quellcode

      1. .fa {
      2. background: #FF8080; /* legt die Hintergrundfarbe fest */
      3. border-radius: 50%; /* wenn der Button rund werden soll */
      4. color: #FFF; /* die Farbe des Icons */
      5. font-size: 72px; /* die Größe des Icons */
      6. width: 200px; /* die Größe des Buttons (weite) */
      7. height: 200px; /* die Größe des Buttons (höhe) */
      8. line-height: 200px; /* das Icon von oben anpassen */
      9. text-align: center; /* das Icon mittig im Button platzieren */
      10. margin-top: 30px;
      11. margin-bottom: 10px;
      12. -webkit-transition: all 0.4s ease;
      13. transition: all 0.4s ease;
      14. }
      15. .fa:hover {
      16. background: #303030; /* bei Mouseover die Hintergrundfarbe */
      17. -webkit-transform: rotate(360deg); /* die ganze Drehung (für halbe Drehung 180deg) */
      18. -ms-transform: rotate(360deg); /* die ganze Drehung (für halbe Drehung 180deg) */
      19. transform: rotate(360deg); /* die ganze Drehung (für halbe Drehung 180deg) */
      20. }
      Alles anzeigen

      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 !

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von andy67 ()