Herzlich Willkommen

Ich freue mich, Sie auf meiner Webfontprojekt-Seite begrüßen zu dürfen.
Auf den nachfolgenden Seite finden Sie 1295 Icons von Fonte Awesome in der Version 5.2 free.

Idee hinter der Seite

Warum diese Seite? Die Idee für dieses Seite war es Menschen die keine bis wenig Erfahrung im Umgang mit Webfonts haben, eine Möglichkeit zu bieten dies zu erlernen.

Ich erhebe nicht den Anspruch auf "Vollständigkeit" mit dieser Seite.
Weiterhin möchte ich allen Besuchern nahe legen nicht gleich das was sie hier finden in ihren Projekten einzubinden sondern sich die Zeit geben um viel auszuprobieren in dem Sie sich ein Übungsprojekt auf ihren Rechner anlegen.

Diese Seite ist keine Support Seite von Fonte Awesome .
Alles was Sie hier an Beispielen vorfinden sind "nur" Vorschläge und finden sie auch auf den Seiten von Fonte Awesome .


Also beginnen wir

Als erste müssen sie sich die entsprechenden Dateien von der Seite von Fonte Awesome herunterladen. Auf dieser Seite wird die Version 5.2 free verwendet


Als nächstes entpacken Sie das entsprechende Archiv in ihr Projekt Ordner.
Auf dieser Seite ist der Schwerpunkt im Umgang mit CSS gelegt, der Umgng mit SVG und JavaScript ist nicht berücksichtigt.


Inhalt des Archiv

fontawesome-free-5.2.0-web

  • css
  • js
  • less
  • metadaten
  • scss
  • sprites
  • svgs
  • webfonts
  • LIZENZ

Die makierten Ordner werden hier benötigt. Die unmakierten Ordner können ruhig gelöscht werden, müssen aber nicht.

Inhalt Ordner CSS

css

  • all.css
  • all.min.css
  • brands.css
  • brands.min.css
  • fontawesome.css
  • fontawesome.min.css
  • regular.css
  • regular.min.css
  • solid.css
  • solid.min.css
  • svg-with-js.css
  • svg-with-js.min.css
  • v4-shims.css
  • v4-shims.min.css

Die makierten Dateien werden hier benötigt. Die unmakierten Datein können ruhig gelöscht werden, müssen aber nicht.

Inhalt Ordner Webfonts

webfonts

  • fa-brands-400.eot
  • fa-brands-400.svg
  • fa-brands-400.ttf
  • fa-brands-400.woff
  • fa-brands-400.woff2
  • fa-regular-400.eot
  • fa-regular-400.svg
  • fa-regular-400.ttf
  • fa-regular-400.woff
  • fa-regular-400.woff2
  • fa-solid-900.eot
  • fa-solid-900.svg
  • fa-solid-900.ttf
  • fa-solid-900.woff
  • fa-solid-900.woff2

Dieser Ordner wird vollständig benötigt.


Sie haben alles entpackt und in ihren Projektordner eingefügt, dann legen sie jetzt bitte eine leere HTML Datei an, nutzen sie dazu ruhig die unten abgebildeten Vorschläge. Sie dürfen natürlich auch selbst die HTML Datei erstellen.

Inhalt Ordner ihr Projekt

ihr-projekt

  • css
    • all.css
    • all.min.css
    • brands.css
    • brands.min.css
    • regular.css
    • regular.min.css
    • solid.css
    • solid.min.css
  • webfonts
    • fa-brands-400.eot
    • fa-brands-400.svg
    • fa-brands-400.ttf
    • fa-brands-400.woff
    • fa-brands-400.woff2
    • fa-regular-400.eot
    • fa-regular-400.svg
    • fa-regular-400.ttf
    • fa-regular-400.woff
    • fa-regular-400.woff2
    • fa-solid-900.eot
    • fa-solid-900.svg
    • fa-solid-900.ttf
    • fa-solid-900.woff
    • fa-solid-900.woff2
  • index.html
Einbinden von all.min.css im Headerbereich

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Ihr Projekt </title>
<!-- hier die CSS Datei für Fontawesome Webfont- Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>








</body>
</html>
Einbinden eines Webfont-Icons im Dokument

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Webfonticon - Home </title>
<!-- hier die CSS Datei für Fontawesome Webfont- Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
Ihr erstes Webfont-Icon von Fontawesome

einmal mit dem HTML Element i
<i class="fas fa-home"></i>
einmal mit dem HTML Element span <span class="fas fa-home"></span> </body> </html>

Wenn sie alles erfolgreich ausgeführt haben sollten sie dieses Webfont-Icon sehen Gut. Dann geht es unter Beispiele weiter
Sollte dies nicht sein, überprüfen sie bitte noch einmal den Pfad zu all.min.css