How to Make a Custom Icon Font with SVG Graphics
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- Ever wanted to make a custom icon font for your websites or to use in documents on your computer? If you design custom icons, you can easily turn SVG files into a font that you can use anywhere you'd like. This tutorial will take you through the steps to generate your custom font in no time.
__________________________________________
💻 Programs & Services Mentioned in Video
Adobe Illustrator: www.adobe.com/...
IcoMoon: icomoon.io/
Divi // Elegant Themes: bit.ly/3mun7TN
WordPress: wordpress.org/
👉 ADDITIONAL FONT CREATORS
Fontastic: fontastic.me/
Fontello: fontello.com/
Glyphter: glyphter.com/
Futuramo: futuramo.com/a...
___________________________________________
⭐️ EXTRA RESOURCES ⭐️
✅ Need help coming up with headlines for your creative content?
Get my FREE guide Ten Simple Formulas To Write Better Headlines to help you craft the perfect headlines for your emails.
michellethecre...
✅ Looking to build a website?
Get my FREE Building a Website Checklist for tips on laying out and creating your site.
Get it here at this link: michellethecre...
👉 Check Out My Recommended Website Design Resources:
Flywheel Web Hosting: share.getf.ly/...
Divi // Elegant Themes: bit.ly/3mun7TN
*Affiliate Disclaimer:
Note this description contains affiliate links that allow you to find the items mentioned in this video and support the channel at no cost to you. While this channel may earn minimal sums when the viewer uses the links, the viewer is in no way obligated to use these links. Thank you for your support!
#MichelleTheCreator #IconFont #CustomFont
Michelle is a legend. This really helped me and my team to find a solution to a client request.
🙌 love to hear it!
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 .
This was very helpful, Michelle! Thank you!!
So glad!
This is really good, much lighter than including the whole of fontawesome :D
Glad you liked!
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!
If using within the Bootstrap framework, instead of using , can I use instead?
This was useful and I can finally use text gradient with svg. Thanks
Glad I could help!
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...
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.
IcoMoon is the BOMB. Sooo nice.
Absolutely agree!
very helpful! I used this for my paragraph styling
Glad I could help!
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!
Thanks! It really helped me a lot.
Glad you found it helpful!
Awesome Michelle, thank you! this saved me lots of time :)
Glad it was helpful!
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!
@@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.
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!
font-weight doesn't work correctly, how to fix it? thanks
Finally, thank you!
No problem!
appreciate it....thank you
what on earth is e900? How do assign each icon to a specific letter on the keyboard?
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
Gold!
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.
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!
@@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!
@@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
@@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?
is there a way to create a svg file and then change the icon color with css(just like font awesome icons)
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/
@@Michelle.The.Creator thankyou so much
Once I install this font on my computer, how do I know which character to type to get the icon?
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.
Thank you.
You're welcome!
When I save the font it's just empty without the icons :(
Did you try different programs to see if you get the same result?
@@Michelle.The.Creator Yes I did. I also tried generating the font a few times. The images were just SVG's.
im a try this