I want to use Googles Material Icons Font in my website so that I can embed the icons as opposed to using the SVG/PNG files of each icon. Am i able to add the stylesheet to the head of my page using the Custom Code advanced setting and then use an iFrame to reference the icon? Or is there a way to add it using JS and use it that way? Any input on adding or embedding icons would be great. Thanks.
You can upload it to the site (via the editor > Upload font) and use it as usual like:
$w('#text1').text = `menu, edit, close, arrow_back, undo, celebration`;
will give you:
https://jonatandor35.wixsite.com/my-site-1
P.S. and of course, you can do everything via the editor with no code, if you don’t need it to be dynamic.
@jonatandor35 This is so great, I had the font uploaded but couldn’t figure out how to utilize it. I am going to give this a try today. As a work around I just put the stylesheet and icon static html in an iframe and it worked but isn’t exactly how I wanted to use it. I really appreciate the response, thanks so much!
@jonatandor35 I must not have uploaded the font properly, or the wrong file, because I can’t get the js to work like your example.
@syoung1515 try upload a woff2 file. See screen shot (taken from EditorX. On the classic editor it’s a little bit different UI, but it’s close enough).
And I don’t know if you need all the files (I am not really familiar with material icons, just quickly tried it when I read your question. Maybe that’s not what you need(.
For the sake of the example I used this file:
https://fonts.gstatic.com/s/materialsymbolsoutlined/v10/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2
Of course, if you need to change the parameters like Fill etc… you’re better work with a stylesheet in an iframe or custom element.
@jonatandor35 That is great clarification. I did upload the woff2 file so I will play with that more. I think I may just go the iframe route. Thanks again, I really appreciate your time!