Michelle is a legend. This really helped me and my team to find a solution to a client request.
@Michelle.The.Creator2 ай бұрын
🙌 love to hear it!
@carlottacraig36742 жыл бұрын
This was very helpful, Michelle! Thank you!!
@Michelle.The.Creator2 жыл бұрын
So glad!
@codingwithmat2 жыл бұрын
This is really good, much lighter than including the whole of fontawesome :D
@Michelle.The.Creator2 жыл бұрын
Glad you liked!
@nicolaszein Жыл бұрын
IcoMoon is the BOMB. Sooo nice.
@Michelle.The.Creator Жыл бұрын
Absolutely agree!
@olga_lc10 ай бұрын
This was useful and I can finally use text gradient with svg. Thanks
@Michelle.The.Creator10 ай бұрын
Glad I could help!
@TCLKanxi3 ай бұрын
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.Creator11 ай бұрын
Glad it was helpful!
@TCLKanxi3 ай бұрын
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!
@MrMofis3 ай бұрын
@@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.
@dennissison669611 ай бұрын
very helpful! I used this for my paragraph styling
@Michelle.The.Creator10 ай бұрын
Glad I could help!
@TCLKanxi3 ай бұрын
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!
@정동환-t2i2 жыл бұрын
Thanks! It really helped me a lot.
@Michelle.The.Creator2 жыл бұрын
Glad you found it helpful!
@relooc9 күн бұрын
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!
@TCLKanxi3 ай бұрын
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
@MyspanaMJ9 ай бұрын
If using within the Bootstrap framework, instead of using , can I use instead?
@TCLKanxi3 ай бұрын
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!
@stefanofattori896 ай бұрын
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
@Madden19707 ай бұрын
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?
@zerovirusdetect2 жыл бұрын
is there a way to create a svg file and then change the icon color with css(just like font awesome icons)
@Michelle.The.Creator2 жыл бұрын
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/
@zerovirusdetect2 жыл бұрын
@@Michelle.The.Creator thankyou so much
@TheAdventureMonk2 жыл бұрын
Thank you.
@Michelle.The.Creator2 жыл бұрын
You're welcome!
@kathymoncelsi91642 жыл бұрын
Once I install this font on my computer, how do I know which character to type to get the icon?
@Michelle.The.Creator2 жыл бұрын
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.