Добавить значок Google material design в css псевдо: после контента

Я просто хотел добавить некоторые из googles material design иконы к содержимому ссылки при наведении:

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

но это не работает, пожалуйста, см. Мой скрипка.

10
css3 html material-design

3 ответов

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

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

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

скрипка

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

28

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

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

C. Шуберт был почти там с их ответом, но если вы также хотите иметь поддержку 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;
}

и как К. Шуберт сказал изменить content: "[whatever icon here]"; к нужному значку.

1