Question

根据官方指南，在类中添加“ md-48”被认为是将字体大小调整为48px，但此处不起作用。我想念什么吗？我还尝试使用CSS将.material-icons的字体大小设置为48px，但仍然不受影响。

/*.material-icons{
    font-size: 48px;
}*/

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
<div class="container-fluid mobileMenu">
            <i class="material-icons md-48">list</i>
        </div>

Answer 1

我不知道实质性图标及其CSS类。
但是，如果仅使用!important，则可以覆盖字体大小。

.md-48 {
  font-size: 48px !important;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container-fluid mobileMenu">
  <i class="material-icons">list</i>
  <i class="material-icons md-48">list</i>
</div>

Answer 2

您可以直接在标记中添加图标的大小，或添加CSS类来实现此目的：

.material-icons.md-60 { font-size: 60px; }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container-fluid mobileMenu">
  <i class="material-icons" style="font-size:60px;">list</i>
</div>

<div class="container-fluid mobileMenu">
  <i class="material-icons md-60">list</i>
</div>

调整Google材质图标的字体大小

2 个答案: