Градиент SVG поверх иконки Instagram из FontAwesome 5

Question

После обновления до FontAwesome 5 я не могу раскрашивать svgs FontAwesome.

Вот мой пример: ⠀⠀⠀⠀⠀ https://codepen.io/shadrix/pen/GygdZr

Было бы здорово, если бы это работало, как здесь: ⠀⠀⠀⠀⠀ https://codepen.io/immad-hamid/pen/jVNvQO

(Примечание: он использовал FontAwesome 4).

_{Свободный перевод вопроса Gradient over Instagram SVG of FontAwesome 5 от участника @Philipp Mochine.}

Answer 1

На иконки больше не ссылаются как на глифы шрифта, ссылаются на встроенный SVG.

Цвет содержимого иконки определяется как fill = "currentColor".

Техника с установкой фона и использованием -webkit-background-clip больше не работает. Вместо этого вы можете напрямую установить свойство цвета. К сожалению, здесь возникают проблемы, потому что color не поддерживает градиенты. Вместо этого вы можете установить заливку, если используете определение градиента SVG:

body{
  background: black;
}
div {
  display:flex;
  justify-content:center;
  font-size:50px;
  color: white;
}

div:hover svg * {
  fill: url(#rg);
}

<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
<svg width="0" height="0">
  <radialGradient id="rg" r="150%" cx="30%" cy="107%">
    <stop stop-color="#fdf497" offset="0" />
    <stop stop-color="#fdf497" offset="0.05" />
    <stop stop-color="#fd5949" offset="0.45" />
    <stop stop-color="#d6249f" offset="0.6" />
    <stop stop-color="#285AEB" offset="0.9" />
  </radialGradient>
</svg>
<div>
<i class="fab fa-instagram" aria-hidden="true"></i>
</div>

Атрибут r для радиального градиента не может быть выражен в тех же терминах, что и в CSS, поэтому здесь он является приблизительным.

Обратите внимание на селектор div: hover svg *. при наведении он перезаписывает атрибут элемента. Он должен напрямую ссылаться на стилизованный элемент, если он наследует этот стиль, fill = "currentColor" будет иметь более высокую специфичность.

_{Свободный перевод ответа от участника @ccprog.}

БЛОГ НА HUSL

Градиент SVG поверх иконки Instagram из FontAwesome 5

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