font awesome icon ohne cdn - magento 2.0.8


7

Ich möchte das fantastische Symbol für Schriftarten in magento2 integrieren. Ich habe font-awesome Version 4.6.3 heruntergeladen. Die Baumstruktur des Ordners "font-awesome" ist unten dargestellt.

Ordnerstruktur

Ich habe auf diesen Link verwiesen und eine Vorstellung davon bekommen, wo Schriftarten und CSS platziert werden sollen, aber ich weiß nicht, wo ich den verbleibenden Ordner weniger und scss platzieren soll.

Kann jemand den schrittweisen Prozess der Integration von Font-Awesome-Symbolen in Magento2 erklären?


1
Wenn Sie eine CSS-Datei einschließen, benötigen Sie nicht weniger, eine CSS-Datei und eine CSS-Datei. Lassen Sie mich wissen, wenn Sie wissen möchten, wie Sie die Datei font-awesome.css über XML einfügen können.
Arun Karnawat

1
Bitte warten Sie, ich werde meine Sachen in dieser Frage aktualisieren. Ich weiß, wie man in XML einbindet.
Bilal Usean

Ja, du hast Recht, es hat funktioniert. nicht weniger brauchen und scss. danke @ArunKarnawat
Bilal Usean

Antworten:


10

Schritte zum Integrieren von Schriftarten fantastisch

  1. Laden Sie die font-awesome-Bibliothek von diesem Link herunter
  2. Platzieren Sie die Schriftdateien in <custom-theme-directory>/web/fonts
  3. Platzieren Sie die CSS-Dateien in <custom-theme-directory>/web/css
  4. Deklarieren Sie Font Awesome CSS in der benötigten Layout-Datei

Beispiel: Magento_Theme / layout / default_head_blocks.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <css src="css/font-awesome.min.css" />
    </head>
</page>
  1. wir können in phtml wie aufrufen <i class="fa fa-binoculars"></i>

Das hat super geklappt! Neugierig .. Was ist, wenn die Verwendung einer solchen Bibliothek Leistungseinbußen mit sich bringt?
JustinP
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.