调整谷歌材料图标字体大小

Question

根据官方指南，将“md-48”添加到类中应该可以将字体大小调整为48像素，但这里似乎没有效果。我有遗漏什么吗？ 我还尝试使用CSS将.material-icons的字体大小设置为48像素，但没有影响。

/*.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>

- Talha Munir

Answer 1

您可以直接在标签中添加图标的大小，或者添加一个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>

- Rémi M.

Answer 2

我不知道什么是材料图标及其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>

- MrMaavin

Answer 3

对于更新的 Google 图标，您可以将字体大小添加到提供的 Google CSS 中，或者您可以为您的图标添加一个新类，然后为其提供字体大小属性。

/* Option 1 */
.material-symbols-outlined {
  font-size:30px;
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 0
}

/* Option 2 */
.icon{
  font-size:20px;
}

- Rackanak

Answer 4

我在stackoverflow上找到了这个答案，对我来说非常完美：

.send-icon {
  transform: scale(2);
}

- Marcin Żmigrodzki