PrestaShop 1.6.x. Wie man Font Awesome Icons ändert

Von diesem Tutorial erfahren Sie, wie man Font Awesome Icons in Prestashop 1.6.x ändert.

PrestaShop 1.6.x. Wie man Font Awesome Icons ändert

1. Überprüfen Sie das Icon, indem Sie das Entwicklerwerkzeug in Ihrem Browser, zum Beispiel, Firebug (für Mozilla Firefox) nutzen, um zu erfahren, auf welche Weise dieses Icons hinzugefügt wurde. Sie könne erfahren, wie man das Firebug Plugin nutzt.

2. In unserem Fall gehört das Icon zum CSS Selektor:

   					.shopping_cart > a:first-child::before
   				

   

3. Um das Icon zu ändern, sollen Sie die Änderungen an der Datei vernehmen, in der der Code des Icons sich befindet. Sie können den Pfad zu dieser Datei finden, indem Sie Firebug nutzen. Drücken Sie mit der rechten Maustaste auf den Dateinamen in Firebug und wählen Sie Lokation kopieren (Copy Location). Fügen Sie den kopierten Link in einen Texteditor auf Ihrem Computer ein. Sie sehen den vollständigen Pfad zur Datei:

   

4. In unserem Fall sollen wir die Änderungen an dem CSS Code in der Zeile 33 in der Datei blockcart.css, die sich im Ordner themes/themeXXXX/css/modules/blockcart/ auf dem Server befindet, vornehmen. Um die Änderungen an dieser Datei vorzunehmen, loggen Sie sich ins Hosting Control Panel ein.

5. Öffnen Sie den Dateimanager (File Manager) und finden Sie den Ordner Ihrer Website (Sie können die folgenden Schritte ausführen, indem Sie FTP nutzen).

6. Finden Sie den Ordner themes/themeXXXX/css/modules/blockcart/ und öffnen Sie die Datei blockcart.css:

   

7. Finden Sie die notwendige Zeile (in unserem Fall ist es die Zeile 33) in der Datei blockcart.css. Sie sehen den Code, den Sie vorher in Firebug gesehen haben:

   					.shopping_cart > a:first-child:before {
   						content: "\f07a";
   						position: absolute;
   						font-family: "FontAwesome";
   						display: inline-block;
   						font-size: 36px;
   						font-weight: 400;
   						color: #fbdd12;
   						left: 2px;
   						top: 6px;
   						-moz-transition: all 0.2s ease;
   						-o-transition: all 0.2s ease;
   						-webkit-transition: all 0.2s ease;
   						transition: all 0.2s ease; }
   				

   Das Icon hat den Codewert \f07a, der in der CSS-Eigenschaft content festgelegt wurde:

   

8. Sie können diese Liste der Font Awesome Icons nutzen, um ein anderes Icon auszuwählen und den entsprechenden Codewert zu finden. Sie können auch den Code des Icons im Internet finden.

9. Lassen Sie uns das Icon «Geschenk» wählen. Drücken Sie auf den Link des Icons und finden Sie seinen Wert Unicode. Kopieren Sie den Wert – f06b. Achten Sie darauf, dass einige Icons auf der Website nicht angezeigt werden können, weil es Stile in Vorlagendateien für die neuen Font Awesome Icons fehlen:

   

10. Kehren Sie zur Datei blockcart.css zurück. Ersetzen Sie den vorhandenen Code des Icons durch den von Ihnen kopierten Code. Löschen Sie den Rückstrich vor dem Code. In unserem Fall muss der Code für die Eigenschaft content wie folgt aussehen:

    					content: "\f06b";
    				

    

11. Speichern Sie die Änderungen und aktualisieren Sie die Seite, um sich die vorgenommenen Änderungen anzuschauen. Sie haben erfolgreich die Icons geändert:

    

Sie können jetzt selbst Font Awesome Icons in Prestashop 1.6.x ändern.

Sie können auch das ausführliche Video-Tutorial nutzen:

PrestaShop 1.6.x. Wie man Font Awesome Icons ändert