Drupal 7.x. Wie ersetzt man FontAwesome Icons durch Bilder

Stacy Martin Januar 16, 2015

Rating: 5.0/5. From 1 vote.

Please wait...

Von diesem Tutorial erfahren Sie, wie ersetzt man FontAwesome Icons durch Bilder in Drupal 7.

Drupal 7.x. Wie ersetzt man FontAwesome Icons durch Bilder

FontAwesome Icons kann man durch Bilder in CSS Dateien ersetzen:

Drücken Sie F12 auf der Tastatur und drücken Sie mit der rechten Maustaste aufs Icon, das Sie ersetzen möchten, und wählen Sie die Variante Element untersuchen (Inspect Element) um das Untersuchungswerkzeug Firebug in Ihrem Browser zu öffnen.
Positionieren Sie den Cursor aufs Icon, das Sie ersetzen möchten, um zu bestimmen, in welcher Datei und auf welcher Zeile der Code dieses Icons ist:
Laden Sie das Bild in den Ordner sites/all/themes/themeXXX/images auf dem Server hoch, wo themeXXX der Name Ihres Themas ist:
Öffnen Sie die notwendige Datei mit Hilfe von Dreamweaver oder Editor (Notepad) auf dem Server und finden Sie die Zeile mit solchem Code:
```
a.tm-follow-link-facebook:before {
	content: "\f0d5";
}
```
Ersetzen Sie ihn durch:
```
a.tm-follow-link-facebook:before {
    background: url("http://yourwebsite.com/sites/all/themes/themeXXX/images/facebook.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: "";
    height: 43px;
    position: absolute;
    width: 43px;
}
```
Ersetzen Sie, bitte, http://yourwebsite.com/sites/all/themes/themeXXX/images/facebook.png durch den Pfad zum Ihren Bild und ändern Sie den Dateinamen auch. Auch sollen Sie die Optionen “height” und “width” entsprechend den Größen Ihres Bildes ändern.
Sie können diese Anleitung nutzen Wie erstellt man CSS Klasse für Vorlagen WordPress, Drupal und Joomla um sich mit der Arbeit mit dem Werkzeug für Element untersuchen (Inspect Element) bekannt zu machen.
In manchen Fällen ist es nötig solche Eigenschaften CSS, wie top/left oder bottom/right hinzuzufügen, um das Bild auszurichten.
Speichern Sie die Änderungen in der aktualisierten Datei und laden Sie sie auf den Server hoch. Ersetzen Sie die aktuelle Datei durch aktualisierte Datei:
Aktualisieren Sie die Seiten, indem Sie die Tastenkombination Control+F5/Command+R nutzen: