Ich verwende materializecss. Aber ich kann die Symbole nicht zum Funktionieren bringen, sagt das Wort, aber zeigt das Symbol nicht an?Materializecss Symbole funktionieren nicht?
enthalten ich die materializecss und die js aber immer noch nicht funktioniert ...
Wer weiß, wie dieses Problem beheben?
müssen Sie die Symbole mit diesem Link enthalten:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Ort dies irgendwo im Kopf und es wird funktionieren!
Sie können die folgenden Schritte ausführen, um das Symbol zu machen -
diesen Link in Ihrer HTML-Seite hinzufügen - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
den Browser öffnen und Sie werden das Symbol gemacht hat sehen. aber wir wollen nicht, dass das Icon mit googleapis gerendert wird.
Öffnen Sie die Konsole und gehen Sie auf die Quelle von Google API und öffnen Sie die CSS-Datei, kopieren Sie die gesamte CSS und fügen Sie die CSS in eine CSS-Datei oder materialize.min.CSS.
Sie sehen die Schriftart URL in der CSS, die Sie gerade kopiert haben, öffnen Sie diese URL im Browser und die Datei des Woff2-Format wird heruntergeladen.
Jetzt kopieren Sie einfach die Datei in den Font-Ordner und ändern Sie die Quelle der Schriftart in der CSS-Datei, um auf diese Datei zu zeigen.
aktualisieren Sie die Seite, Sie werden sehen, dass das Symbol gerendert hat.
Dank
Sehr nützlich, um Zeit zu sparen, um zu viele Anfragen an Google API zu vermeiden. Auch wenn Ihre Seite keine Internetverbindung benötigt. –
Wenn Sie Symbol verwenden wollen, vergessen Sie nicht CDN hinzuzufügen. Wenn Sie nicht CDN verwenden möchten, müssen Sie die Symboldateien und die Karte mit Ihrem Code herunterladen.
CDN für Material Icons
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Folgende Tags können, um anzuzeigen Material Symbole verwendet werden.
<i class="material-icons">add</i>
Um weitere Informationen zu erhalten, finden Sie unter diesem offiziellen Link. Material-icons
Im Folgenden finden Sie ein Beispiel für einen funktionierenden Codeausschnitt mit wenigen Symbolen.
<!DOCTYPE html>
<html>
\t <head>
\t <title>ICON</title>
\t <!-- include material-icons -->
\t <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
\t <!--Let browser know website is optimized for mobile-->
\t <meta name="viewport" content="width=device-width, initial-scale=1.0" />
\t </head>
\t <body class="row">
\t \t \t <div class="col s12" >
\t \t \t \t <i class="material-icons">add</i>
\t \t \t \t <i class="material-icons">thumb_up</i>
\t \t \t \t <i class="material-icons">shopping_cart</i>
\t \t \t \t <i class="material-icons">perm_identity</i> \t \t \t
\t \t \t </div>
\t </body>
</html>
einmal Vielen Dank noch einmal! – Aapje
kein Problem;) –
Oh, das ist ein Gotcha! Vielen Dank! Worum geht es dabei? Laden wir etwas von Google auf diese Weise herunter? Oder wollen sie nur verfolgen, was wir verwenden?Was passiert, wenn ich meine Website in einer getrennten Umgebung (striktes Sicherheits-Intranet) bereitstellen möchte? –