主页 / 问题 / 1600799
Accepted
stackoverflow
Asked:2024-11-25 15:50:27 +0800 CST2024-11-25 15:50:27 +0800 CST

为什么不应用图标样式？

  • 772

我连接材质图标：<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

我想让CSS图标变小：

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' -25,
  'opsz' 20
}

我用：<span class="material-symbols-outlined">search</span>

但使用的是常规图标，为什么？

应该是这样的：

在此输入图像描述

但它是这样应用的：

在此输入图像描述

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' -25, 'opsz' 20
}
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

<span class="material-symbols-outlined">search</span>

css

1 个回答

  1. Best Answer

    您的样式已应用，为了更清晰，我添加了绿色，并且它已应用（困难在于参数font-variation-settings），因为问题在于如何连接字体。

    font-variation-settings在我看来，为了正确应用参数，有必要连接支持所有参数的全变量版本的字体，例如'wght'、'FILL'、'GRAD'和'opsz'。

    这就是有趣的地方

    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100&display=swap" rel="stylesheet">

    .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' -25, 'opsz' 20;
  color: green; 
}
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100&display=swap" rel="stylesheet">

<span class="material-symbols-outlined">search</span>

    如果您同时需要文本和图标，那么您需要单独执行它们，因为在您的情况下，只有在找不到图标时才会反映搜索。

    .icon-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
  color: red;
}

.icon {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
  font-size: 48px;
  color: green;
}

.text {
  margin-top: 8px;
  font-size: 16px;
}
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100&display=swap" rel="stylesheet">

<div class="icon-with-text">
  <span class="icon">search</span>
  <span class="text">Search</span>
</div>

    • 0

相关问题