How to Make a Custom Icon Font with SVG Graphics

[@EarlPetersen-g9x]

Michelle is a legend. This really helped me and my team to find a solution to a client request.

[@Michelle.The.Creator]

🙌 love to hear it!

[@carlottacraig3674]

This was very helpful, Michelle! Thank you!!

[@Michelle.The.Creator]

So glad!

[@codingwithmat]

This is really good, much lighter than including the whole of fontawesome :D

[@Michelle.The.Creator]

Glad you liked!

[@nicolaszein]

IcoMoon is the BOMB. Sooo nice.

[@Michelle.The.Creator]

Absolutely agree!

[@olga_lc]

This was useful and I can finally use text gradient with svg. Thanks

[@Michelle.The.Creator]

Glad I could help!

[@TCLKanxi]

And also do we necessarily need the .js and json file to make this work? Thank you and everyone who cares to share your knowledge .

[@MrMofis]

Awesome Michelle, thank you! this saved me lots of time :)

[@Michelle.The.Creator]

Glad it was helpful!

[@TCLKanxi]

Hi MrMofis, you got it to work? I don't seem to get it to work. I have a font folder same level as index.html, so I copied the icomoon.woff file into this font folder, then, made a new css file just for these fonticons (copied the entire icomoon style.css file over) in my css folder which is at the same level as my index.html, made sure the src url is pointed right. Made a new js file copied the icomoon .js file over, which is in a js folder same level as my index.html, anything I did wrong or miss? Do I need to change the font src url to just icomoon.woff because in the icmoon style.css the file name has some other stuff in the end of the file name like this: icomoon.woff?24e9tn. Thank you very much!

[@MrMofis]

@@TCLKanxi how can I contact you? I can send you the Css I am using. I have the font working in WordPress admin panel, just the font file and Css required to work.

[@dennissison6696]

very helpful! I used this for my paragraph styling

[@Michelle.The.Creator]

Glad I could help!

[@TCLKanxi]

Hey Dennissison6696, you got it to work? I don't seem to be able to get it to work and see anyone would care to share your experience of using this. I have a font folder same level as index.html, so I copied the icomoon.woff file(I will use only the .woff one) into this font folder. Then I made a new css file just for these fonticons (copied the entire icomoon style.css file over) in my css folder which is at the same level as my index.html, made sure the src url is pointed right. Made a new .js file copied the icomoon .js file over, which is in a js folder same level as my index.html, anything I did wrong or miss? Do I need to change the font src url to just icomoon.woff because in the icmoon style.css the file name has some other stuff in the end of the file name like this: icomoon.woff?24e9tn. The div class I put this span in, already has all the styles, font size and color etc. set, do I need to style this span specifically? It now just shows a tiny square outline, no icon :(Thank you very much!

[@정동환-t2i]

Thanks! It really helped me a lot.

[@Michelle.The.Creator]

Glad you found it helpful!

[@relooc]

Hey Michelle, thank you so much for this. I've run into an issue that's to do with 1) me being lame with Illustrator, and therefore 2) instead of creating the icons in Illustrator, I am importing an image into each artboard, that I want to be the character. So when I import the SVGs into Icomoon, it says "embedded images are ignored and that mastered images are not converted to vector...". Is there a way around this? Either in Illustrator, Icomoon or some other way? Grateful as ever for any tips :)

[@devvgraphics]

Finally, thank you!

[@Michelle.The.Creator]

No problem!

[@TCLKanxi]

Hi Michelle, great video so I decide to change the font awesome icons on my site to these icomoon ones. BUT I don't seem to get it to work. I have a font folder same level as index.html, so I copied the icomoon.woff file into this font folder, then, made a new css file just for these fonticons (copied the entire style.css file in the exported ), made a new js file just for these font icons in the js folder also same level as index.html, is there anything I did wrong or miss? Do I need to change the font src url to icomoon.woff, or do I keep Thank you very much!

[@rinaarutiunian]

Thank you! Have you ever faced a problem when the font character looks slightly different from the initial svg icon (some details are missing)? Don't know how to deal with that...

[@Michelle.The.Creator]

Hmmm...not sure on this one. It might depend on which program you are using to make the font. I am wondering if it would behave the same way if you generated it with a different icon font generator.

[@gotohome4609]

appreciate it....thank you

[@MyspanaMJ]

If using within the Bootstrap framework, instead of using , can I use instead?

[@TCLKanxi]

Hey Michelle and everyone, you got it to work? I don't seem to be able to get it to work and see anyone would care to share your experience of using this. I have a font folder same level as index.html, so I copied the icomoon.woff file(I will use only the .woff one) into this font folder. Then I made a new css file just for these fonticons (copied the entire icomoon style.css file over) in my css folder which is at the same level as my index.html, made sure the src url is pointed right. Made a new .js file copied the icomoon .js file over, which is in a js folder same level as my index.html, anything I did wrong or miss? Do I need to change the font src url to just icomoon.woff because in the icmoon style.css the file name has some other stuff in the end of the file name like this: icomoon.woff?24e9tn. The div class I put this span in, already has all the styles, font size and color etc. set, do I need to style this span specifically? It now just shows a tiny square outline, no icon :(Thank you very much!

[@stefanofattori89]

font-weight doesn't work correctly, how to fix it? thanks

[@DopamineMVWM]

what on earth is e900? How do assign each icon to a specific letter on the keyboard?

[@Michelle.The.Creator]

I think it depends on what program you are using. I know that Icomoon will let you assign a specific character to your SVGs and in the end they all usually have a hex code associated with it. For example, this site lists those out. psdtowp.net/html-codes-special-characters.html

[@Madden1970]

Gold!

[@relooc]

I really want to use a couple of icons I have but as part of another font, not their own font. For use in a smart home app where I can use any font installed in iOS (the app runs on iPhone/iPad). But in the software to build the app, any text filed can only be a single font, size and colour, so I can't select part of the text and change its font (like you can in PS Illustrator etc). I'd be ok with not being able to change icon colour. It would be amazing to be able to have type an icon into the text field. Is there any way to add an icon to an already existing front? In this case the font is Poppins-Regular.

[@Michelle.The.Creator]

What you are describing isn't impossible! I dabbled with my theory, but you are welcome to explore it further. If you have the Poppins .ttf file you can use a site like transfonter.org/ to turn the font into and SVG file. You can then upload that SVG font into a program like icomoon.io/ where you can also add additional SVG characters to your main font therefore having the main font and whatever icons all in the same file. Let me know if this actually works for you!

[@relooc]

@@Michelle.The.Creator So I 'think' I've managed to combine the font plus my icon into a single ttf font in icomoon, downloaded it and installed it, the regular characters seem to work ok, but I have no idea how to type that custom icon I made lol!

[@Michelle.The.Creator]

@@relooc There should be a way to tell what character code is assigned to your icons in icomoon. This site, for example, shows hex codes for characters. psdtowp.net/html-codes-special-characters.html

[@relooc]

@@Michelle.The.Creator OMG it worked like a charm!!! The icon is white just like the rest of the text but I guess there's no way to force a certain colour just for the icon. At least now I can add a bunch of other icons I had too. You madam are a genius! Thank you. Is there somewhere I can donate to say thanks?

[@zerovirusdetect]

is there a way to create a svg file and then change the icon color with css(just like font awesome icons)

[@Michelle.The.Creator]

Yes, there is! I just updated the blog for this video to show a code example. You can use "fill" to change the color if you add a class to the SVG image. I hope this helps. michellethecreator.com/how-to-make-a-custom-icon-font-with-svg-graphics/

[@zerovirusdetect]

@@Michelle.The.Creator thankyou so much

[@TheAdventureMonk]

Thank you.

[@Michelle.The.Creator]

You're welcome!

[@kathymoncelsi9164]

Once I install this font on my computer, how do I know which character to type to get the icon?

[@Michelle.The.Creator]

Depending on the app you used to create the font, you can typically assign the icon to a particular letter. Additionally, if you had a program like Illustrator or InDesign you can look at the glyphs panel and it will show you the icon characters. Hopefully that helps.

[@ThatsOurRobert]

When I save the font it's just empty without the icons :(

[@Michelle.The.Creator]

Did you try different programs to see if you get the same result?

[@ThatsOurRobert]

@@Michelle.The.Creator Yes I did. I also tried generating the font a few times. The images were just SVG's.

[@oO5Dynasty]

im a try this