Will man auf einer Webseite Web-Symbole (Icons) verwenden, hat man entweder die Möglichkeit die Grafiken selber herunterzuladen und einzufügen oder Icon Fonts zu verwenden.
Icon Fonts sind eine Ansammlung von Web-Symbolen vergleichbar zu Fonts für Webschriften, nur werden hier anstatt Buchstaben Web-Symbole verwendet. Dadurch kann man die Web-Symbole mittels CSS-Code (z.B. die Farbe oder Grösse der Web-Symbole) anpassen.
Ich empfehle ein Blick auf Font Awesome zu werfen. Font Awesome ist kostenlos, bietet eine grosse Anzahl an Web-Symbolen und lässt sich sehr einfach in die Webseite einfügen.
Um Font Awesome in die eigene Webseite einzufügen muss man auf dem Menüpunkt Get Started gehen, dort werden die verschieden Möglichkeiten aufgelistet wie man Font Awesome einfügt.
Eine Möglichkeit ist es diese Codezeile in den <head> Bereich der Webseite (HTML-Seiten) einzufügen:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Eine andere Möglichkeit wäre es die Font Awesome Dateien herunterzuladen und in den Webordner (mittels FTP-Programm) zu kopieren, danach diese Codezeile im <head> Bereich der Webseite (HTML-Seiten) einzufügen:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Der Pfad zur CSS-Datei font-awesome.min.css (Ordnername muss übereinstimmen mit Linkangabe) muss natürlich angepasst werden, sonst funktioniert es nicht.
Hat man Font Awesome in die Webseite eingefügt, geht man auf dem Menüpunkt Icons wählt die Web-Symbole aus die man haben möchte, klickt drauf und kopiert sich den Code der angegeben wird. Unter dem Menüpunkt Examples findet man noch Beispiele wie man das ganze einzufügen hat.
Hier zeige ich ein kleines Beispiel um zu zeigen wie das ganze funktioniert. Als Beispiel zeige ich eine Liste mit verschiedenen Webbrowsern, für jedes Web-Symbol nehme ich eine andere Farbe.
HTML-Code
<html>
<head>
<title>Web-Symbole</title>
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
</head>
<body>
<div class="list-group">
<ul class="fa-ul">
<li><a class="list-group-item" href="https://www.mozilla.org/de/firefox/new/"><i class="fa fa-firefox fa-fw"></i> Firefox</a></li>
<li><a class="list-group-item" href="http://windows.microsoft.com/de-de/internet-explorer/download-ie"><i class="fa fa-internet-explorer fa-fw"></i> Internet Explorer</a></li>
<li><a class="list-group-item" href="https://www.google.de/chrome/browser/desktop/"><i class="fa fa-chrome fa-fw"></i> Chrome</a></li>
<li><a class="list-group-item" href="https://www.apple.com/de/safari/"><i class="fa fa-safari fa-fw"></i> Safari</a></li>
<li><a class="list-group-item" href="http://www.opera.com/de"><i class="fa fa-opera fa-fw"></i> Opera</a></li>
</ul>
</div>
</body>
</html>
CSS-Code
.fa-ul li {
border: 1px solid #ccc;
width: 320px;
}
.fa-firefox {
color: #FF4000;
}
.fa-internet-explorer {
color: #2E64FE;
}
.fa-chrome {
color: #04B404;
}
.fa-safari {
color: #2E9AFE;
}
.fa-opera {
color: #B40404;
}
Erklärung
Die Codezeile <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css"> fügt Font Awesome in die Webseite ein. Jedes Listenelement wird der vorher für den Web-Symbol kopierte Code hinzugefügt, z.B. für den Firefox Web-Symbol <i class="fa fa-firefox">. Mittels der Klasse fa-fw wird den Listenelementen eine feste Breite vergeben. Im CSS-Code wird für jedes Web-Symbol eine andere Farbe gewählt.
Kommentar eingeben