Menu
I just wanted do add some of googles material design icons to the content of a link on hover:
a:hover::after { content: "<i class="material-icons">link</i>" } but it does not work, please see my fiddle.
675
First step is to add the link of material-icons font library in the <head> section of your HTML file. Here is how you do it. Once you have added the link of the material-icons library, the next step is to add the class “material-icons” in the <i> or <span> tag of the <body> section and also add the name of the icon.
You just have to add the following CSS to your after or before element: font: normal normal normal 14px/1 FontAwesome; content: '\f042'; Here the content is the icon you want to add. Just copy the Unicode of the icon from the FA website and paste it in the content with a \ prefix.
See also Google's list: codepoints. To use a Material Icon as CSS pseudo content (:before, :after): xe23c becomes content:"\e23C" . You can use ligatures in pseudo elements, but this will not be supported in IE9. For more stuff, visit me at btn.
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
Also the fiddle didn't correctly load the icon font so put I placed the link in the html.
52
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 styling 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 said change the content: "[whatever icon here]"; to your desired icon.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
