2015-11-22 13 views
6

私はmaterializecssを使用しています。しかし、私はアイコンを取得することはできませんそれは単語を言うがアイコンを表示しない?Materializecssアイコンが機能しませんか?

私はmaterializecssとJSが含まれますが、まだ動作していない...この問題を解決する方法を

誰もが知っていますか?あなたの頭の中で

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

ところ、このどこかに、それが動作します:

答えて

21

あなたは、このリンクでのアイコンを含める必要が!

+1

もう一度ありがとう! – Aapje

+1

問題はありません;) –

+0

ああ、これは問題だ!ありがとう!しかし、それについては何ですか? Googleからそのようなものをダウンロードしていますか?あるいは、私たちが使っているものを追跡したいだけですか?切断された環境(厳格なセキュリティイントラネット)にサイトを展開する予定がある場合はどうなりますか? –

2

あなたはアイコンをレンダリングするには、次の手順を実行することができます -

  1. HTMLページにこのリンクを追加 - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  2. は、ブラウザを開いて、あなたはそのアイコンがレンダリングされた表示されます。アイコンはgoogleapisを使ってレンダリングしたくない。

  3. コンソールを開き、google apisのsrcに移動してcssファイルを開き、css全体をコピーしてcssファイルまたはmaterialize.min.cssに追加します。

  4. あなたは、あなただけのコピーCSSでフォントのURLを参照してくださいブラウザでそのURLを開き、woff2形式のファイルがダウンロードされますされます。

  5. は今だけで、フォントフォルダにファイルをコピーして、このファイルを指すようにCSSファイルでフォントのSRCを変更します。

  6. 手順-1でインクルードしたリンクを削除します。

は、ページを更新するには、アイコンがレンダリングされていることがわかります。

おかげ

+1

Google apiへのリクエストが多すぎないように時間を節約するために非常に便利です。また、あなたのサイトがインターネット接続を必要としない場合。 –

0

あなたはCDNを追加することを忘れないでくださいアイコンを使用しようとしている場合。​​を使用しない場合は、アイコンファイルをダウンロードしてコードにマップする必要があります。

はCDN素材アイコン

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

のために次のタグは、材料のアイコンを示すために使用することができます。

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

詳細については、この公式のリンクを参照してください。続きMaterial-icons

は、いくつかのアイコンでサンプル動作するコードスニペットです。

<!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>

関連する問題