web-dev-qa-db-ja.com

Materializecssアイコンが機能しない？

私はmaterializecssを使用しています。しかし、アイコンが機能しないので、Wordと表示されてもアイコンが表示されません。

Materializecssとjsを含めましたが、まだ機能しません...

誰でもこれを修正する方法を知っていますか？

materialize
11
Aapje

このリンクにはアイコンを含める必要があります。

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

これをあなたの頭のどこかに置くと、うまくいきます！

41
C.Schubert

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

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

  2. ブラウザを開くと、アイコンがレンダリングされていることがわかります。ただし、googleapisを使用してアイコンをレンダリングしたくない。

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

  4. コピーしたCSSにフォントURLが表示され、そのURLをブラウザーで開くと、woff2形式のファイルがダウンロードされます。

  5. ここで、ファイルをフォントフォルダにコピーし、cssファイル内のフォントのsrcをこのファイルを指すように変更します。

  6. 手順-1で含めたリンクを削除します。

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

ありがとう

4
Ujjwal Kumar Gupta

アイコンを使用する場合は、忘れずに [〜＃〜] cdn [〜＃〜] を追加してください。 CDNを使用しない場合は、アイコンファイルをダウンロードしてコードでマッピングする必要があります。

素材アイコンのCDN

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

以下のタグを使用して、素材のアイコンを示すことができます。

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

詳細については、この公式リンクを参照してください。 素材アイコン

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

<!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>
0
Sandun Madola

他の誰かがここでつまずく場合は、要素のフォントをアイコンのフォントを上書きする他の場所に設定していないことを確認してください。特に!importantsに注意してください。

0
Karuhanga