Materializecss icons nicht funktioniert?

Ich bin mit materializecss. Aber ich kann Sie nicht mit den Symbolen arbeiten, Sie sagt, das Wort aber nicht zeigen das Symbol?

Habe ich die materializecss und die js aber immer noch nicht funktioniert...

Weiss jemand wie man dieses Problem beheben?

InformationsquelleAutor Aapje | 2015-11-22

materialize

37

dann schließen Sie die icons, mit diesem link:
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" >
```
platzieren Sie diese irgendwo in Ihrem Kopf und es wird funktionieren!
- Noch einmal vielen Dank!
- kein problem 😉
- Oh, ist das ein gotcha! Danke! Jedoch, was ist das? Wir laden Sie etwas aus Google, das Weg? Oder wollen Sie einfach die Strecke, was verwenden wir? Was ist, wenn ich planen der Bereitstellung von meine Website auf einer getrennten Umgebung (strengen Sicherheits-intranet)?
InformationsquelleAutor C.Schubert
3

Führen Sie die folgenden Schritte, um zu machen die Symbol -
1. fügen Sie diesen link in Ihre html-Seite - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" >
2. öffnen Sie den browser und Sie werden sehen, das Symbol gerendert wurde. aber wir wollen das Symbol zu sein, gerendert mit googleapis.
3. öffnen Sie die Konsole und wechseln Sie in das src von google apis, und öffnen Sie die css-Datei, und kopieren Sie den gesamten css und fügen Sie den css in eine css-Datei oder materialisieren.min.css.
4. sehen Sie die font-url in der css, die Sie gerade kopiert haben, öffnen Sie den url in den browser, und die Datei von woff2-format heruntergeladen werden.
5. nun kopieren Sie einfach die Datei in den font-Ordner und ändern Sie die src von die schriftart in die css-Datei auf diese Datei verweisen.
6. entfernen Sie den link, den Sie in Schritt -1 .
aktualisieren Sie die Seite, sehen Sie das Symbol gerendert wurde.

Dank
- Sehr nützlich um Zeit zu sparen, um zu vermeiden, dass zu viele Anfragen an die google api. Auch wenn Ihre Website Sie brauchen keine internet-Verbindung.
- Nur, um alles, was ich Tat, für andere Referenz: gehen Sie zum link Material+Icons Kopieren Sie den gesamten Inhalt und speichern Sie Sie als css-Datei. vgl. materializeicons.css Dann aktualisieren Sie die font-Datei Speicherort. src: url('../fonts/materializecss.woff2') format('woff2');. Stellen Sie sicher, um die schriftart-Datei unter ../fonts/ - Ordner. d.h. Download woff2 Schrift, um die Schriftarten-Ordner. Die url sollte auf denen Sie den Speicherort der schriftart-Datei.
InformationsquelleAutor Ujjwal Kumar Gupta

Wenn Sie gehen, um das Symbol vergessen Sie nicht, fügen Sie CDN. Wenn Sie nicht verwenden CDN haben Sie zum download von icon-Dateien und anzeigen mit Ihrem code.

EUR für Material-Icons

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" >

Folgenden tags können verwendet werden, um anzuzeigen, material Symbole.

<i class="material-icons">add</i>

Um mehr details zu erhalten, bitte wenden Sie sich mit diesem offiziellen link. Material-icons

Folgenden ist ein Beispiel-arbeiten-code-snippet mit ein paar icons.

HTML:

<!DOCTYPE html>
<html>

	<head>
	  <title>ICON</title>
	  <!-- include material-icons -->
	  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	  <!--Let browser know website is optimized for mobile-->
	  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>

	<body class="row">
			<div class="col s12" >          
				<i class="material-icons">add</i>
				<i class="material-icons">thumb_up</i>
				<i class="material-icons">shopping_cart</i>
				<i class="material-icons">perm_identity</i>			
			</div>
	</body>

</html>

InformationsquelleAutor Sandun Madola

0

Wenn jemand stolpert hier, stellen Sie sicher, Sie sind nicht die Einstellung für das element font irgendwo sonst überschreiben Sie das Symbol schriftart. Vor allem ware von !importants.

InformationsquelleAutor Karuhanga

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.