Почему не применяются стили для иконки?

Question

Подключаю Material Icons: <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>

Answer 1

Ваши стили применяются, для большей наглядности я добавила зеленый цвет, и он применяется, (сложность именно с параметром 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>

если надо, чтоб и текст и иконка были, то надо их отдельно делать, тк в вашем случае search отразится только в случае, если иконка не будет найдена.

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

БЛОГ НА HUSL

Почему не применяются стили для иконки?

Ответы (1 шт):