带有大小和颜色的 Google 图标字体不起作用?

Posted

技术标签:

【中文标题】带有大小和颜色的 Google 图标字体不起作用?【英文标题】:Google Icon Fonts with Size and Colors don't work? 【发布时间】:2016-11-16 20:14:19 【问题描述】:
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>
  <div>
    This is a test page
    <p>
    <i class="material-icons">face</i>
    <i class="large material-icons">face</i>
    <i class="material-icons md-18">face</i>
    <i class="material-icons dark">face</i>
    </p>
  </div>
</body>

我看到所有的图标都是一样的,没有应用样式。是我做错了什么还是这不起作用?

谢谢,拉杰什

【问题讨论】:

【参考方案1】:

我得到了答案,我必须使用外部 CSS,Google Material Fonts 没有 CSS 样式

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

<i class="blue-text text-darken-2 large material-icons ">invert_colors</i>
</p>

谢谢, 拉杰什

【讨论】:

以上是关于带有大小和颜色的 Google 图标字体不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

IE 11 - 屏幕字体、带有媒体类型的打印字体不起作用

使用仅带有真棒字体的标记图标,没有周围的气球

css 图标手机的颜色和大小,iconos,字体真棒

更改所有子元素的字体大小和颜色

字体真棒图标不起作用

Summernote 字体系列和颜色不起作用