Add google design icon in css pseudo: after content

Question

I just wanted to add some material design for googles icons to the hover link content:

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

but this will not work, see my fiddle .

Answer 1

Change your CSS to this:

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

So you can change the content: "[whatever icon here]";

Fiddle

In addition, the violin did not load the icon font correctly, so I put the link in html.

Answer 2

C.Schubert was almost there with their answer, but if you also want to have IE10 + support, you need to add font-feature-settings: 'liga' 1; So, the finished style will look like this ...

 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; } 

And, like C. Schubert, change the content: "[whatever icon here]"; to the desired icon.

Answer 3

If you want to use a material icon with two or more words, you need to use the underline separator as follows:

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

Answer 4

If you want to use material design icons in pseudo-CSS try this:

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