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 !
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 !
- .fa {
- background: #FF8080; /* legt die Hintergrundfarbe fest */
- border-radius: 50%; /* wenn der Button rund werden soll */
- color: #FFF; /* die Farbe des Icons */
- font-size: 72px; /* die Größe des Icons */
- width: 200px; /* die Größe des Buttons (weite) */
- height: 200px; /* die Größe des Buttons (höhe) */
- line-height: 200px; /* das Icon von oben anpassen */
- text-align: center; /* das Icon mittig im Button platzieren */
- margin-top: 30px;
- margin-bottom: 10px;
- -webkit-transition: all 0.4s ease;
- transition: all 0.4s ease;
- }
- .fa:hover {
- background: #303030; /* bei Mouseover die Hintergrundfarbe */
- -webkit-transform: rotate(360deg); /* die ganze Drehung (für halbe Drehung 180deg) */
- -ms-transform: rotate(360deg); /* die ganze Drehung (für halbe Drehung 180deg) */
- transform: rotate(360deg); /* die ganze Drehung (für halbe Drehung 180deg) */
- }
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 !