Добавить значок дизайна Google в css pseudo: после содержимого

Я просто хотел добавить некоторый дизайн материала для googles icons в содержание ссылки при наведении:

a:hover::after {
    content: "<i class="material-icons">link</i>"
}

но это не сработает, см. мой fiddle.

Ответы

Ответ 1

Измените свой CSS на это:

a:hover::after {
  font-family: 'Material Icons';
  content: "link";
  -webkit-font-feature-settings: 'liga';
}

Итак, вы можете изменить content: "[whatever icon here]";

FIDDLE

Кроме того, скрипка неправильно загрузила шрифт значка, поэтому я поместил ссылку в html.

Ответ 2

C.Schubert был почти там с их ответом, но если вы также хотите иметь поддержку IE10 +, вам нужно добавить font-feature-settings: 'liga' 1; Итак, готовый стиль будет выглядеть так...

a:hover::after {
  font-family: 'Material Icons';
  content: "link";
  -webkit-font-feature-settings: 'liga' 1;
  -moz-font-feature-settings: 'liga' 1;
  font-feature-settings: 'liga' 1;
}

И, как и C.Schubert, измените content: "[whatever icon here]"; на нужный значок.

Ответ 3

Если вы хотите использовать значок материала с двумя или более словами, вам нужно использовать разделитель подчеркивания следующим образом:

a:hover::after {
  font-family: 'Material Icons';
  content: "chevron_right";
}

Ответ 4

Если вы хотите использовать значки дизайна материала в псевдо-CSS попробуйте это:

.p::before{
   font-family: "Material Design Icons";
   content: '\F019'
}