Pferde an einem See

Tipps rund um Iconsets für deine Website

  • vor 3 Jahren

Font Awesome bezeichnet eine Sammlung von Icons, die kostenlos auf Websites eingesetzt werden. Sicher haben Sie schon einmal folgende Icons gesehen:
Font Awesome - https://fontawesome.io/icons/ ist sozusagen der Markenname oder Anbieter dieser Icons. Es gibt daneben noch andere:

Alle diese Icon-Fonts sind kostenlos erhältlich (Stand November 2014).Font Awesome ist sicher eins der bekanntesten Icon-Fonts-Sets. Es besticht durch seinen Umfang (359 Icons) und die Anleitung, die einem beim Einbau auf der eigenen Website hilft.

Ausserdem wird eine CSS*-Datei mitgeliefert, die einem viel Programmierarbeit erspart. Font Awesome wird so auch für weniger geübte Nutzer sehr attraktiv.

Font Awesome ist unbegrenzt skalierbar, da es sich um Vektorgrafiken handelt.

Icons sind mehr als Dekoration. Sie helfen dem Nutzer, den Inhalt zu visualisieren. Sie verbinden damit die Schrift mit dem Bild. Aus diesem Grund spricht man auch von Piktogrammen. Sie helfen sich auf der Website optimal zu Recht zu finden und unterstützen so das positive Erlebnis des Besuchers. Und Ihren Erfolg.

Durch die Skalierbarkeit der Icons eignen sie sich sehr gut für alle Ausgabegeräte. Ob I-Phone, Tablet oder PC-Bildschirm überall sehen Sie die Icons scharf abgebildet. Trotzdem laden Sie schnell, da sie wenig Speicherplatz benötigen.

So binden Sie Font-Awesome in Ihre Website ein:

  • Surfen Sie zur Website von Font-Awesome: https://fontawesome.com/
  • Klicken Sie auf Download und speichern Sie ab, merken Sie sich in welchem Ordner.
  • Danach müssen Sie die Dateien noch entpacken - Gehen Sie via Dateiverwaltung zum entsprechenden Ordner, klicken Sie mit der rechten Maustaste auf den Ordner und wählen Sie extrahieren. Speichern Sie die Dateien im gleichen Ordner oder an einem für sie passenden Ort ab.
  • Erstellen Sie in dem Verzeichnis für Ihre Website einen Ordner und benennen ihn font-awesome.
  • Kopieren Sie die Dateien dort hinein.
  • Laden Sie diese Dateien danach auf Ihren Webserver
  • Öffnen Sie die Startseite Ihrer Website und fügen Sie folgenden zusätzlichen Head-Tag ein:
    <link rel="stylesheet" href="ihr_pfad/font-awesome/css/fontawesome.css" >

Denken Sie daran Font Awesome auf jeder Webseite einzubinden. Nicht nur auf der Startseite.

Praxistipp: Wenn Sie nur wenige Icons benötigen, reicht die minimierte Version. Damit sparen Sie einige Kilobyte.

Anwenden der Icon-Fonts

In der Anleitung stehen verschiedene Methoden zur Anwendung der Icon-Fonts. Ich stelle Ihnen die Methode, vor die ich selbst benutze.

So binde ich das Twitter-Symbol ein:

<a href="https://twitter.com/webideen" target="_blank" title="Twitter"><span class="fa fa-twitter f-3x"></span>

So wird das Twitter-Symbol in 3facher Grösse eingebunden.

Dieses Symbol können Sie nun mit CSS stylen. D. h. die Farbe etc. anpassen. Mit den CSS-Eigenschaften before können Sie ein Icon auch einer Überschrift zuordnen.

Zum Beispiel:

h1:before {
content: " f099";
font-familiy: FontAwesome;
font-size: 1em;
padding: 0 3 0 0px;
}

Es kann sein, dass Sie nur wenige Symbole benötigen. Beispielsweise nur die Social Media Icons. Dann lohnt es sich, nur diese einzubinden. Dafür gibt es verschiedene Möglichkeiten.

Hier ist eine davon:

Fontastic - https://fontastic.me/

Mit Fontastic können Sie nicht nur einzelne Icons aussuchen, sondern auch eigene erstellen. Lesen Sie es sich durch und dann ans Werk.

Es gibt auch sonst viele Icons im Netz, die Sie kostenlos nutzen können. Hier zwei Links zu Iconsets:

Iconspedia - https://www.iconspedia.com/

Icons mit Menschen in Bewegung -  Damit können Sie Ihre Website jetzt mit Font Awesome oder anderen Icons verschönern. Und vor allem Ihren Lesern zu einem besseren Erlebnis auf Ihrer Homepage verhelfen.

Nutzen Sie Icons? Wenn ja, welche?

Pferde am See

Hoi, ich bin Claudia Barfuss

Ich arbeite mit Menschen zusammen, bei denen die Tiere im Mittelpunkt stehen und die sich eine Homepage wünschen, die sie bei der Kundengewinnung unterstützt.

Ich begleite sie durch den Dschungel von Technik, Inhalten und Design. Wir arbeiten gemeinsam an ihrer neuen Website, damit sie sich mit ihr rundum wohl fühlen und neue Kunden anziehen.

Mehr von mir findest du auf:

Claudia Barfuss mit Hund und Katzen

Kommentar hinterlassen:

Twitter Facebook