This is some great stuff Maxime. Working with SVG's can be nerve wracking if one doesn't know what is going on under the hood. Thanks Maxime and keep up the good work.
Wow, this is amazing, thank you so much! A question: I have a 3-color icon, but the code shows about 20 different color codes when I search for 'fill'. Am I doing something wrong? Hope you can help 😅
@@elementhow691 I think a fantastic followup to this would be how to swap out all of the font awesome icons used by ele to our own so that fontawesome can be removed. I always do the hamburger menu and X, but forget the submenu icons :D
@@1Deduced Yes I see where you are coming from here! However thankfully there is no longer any need for this, as Elementor finally gives the option to inline the SVG version of the font awesome icons. this allows the Font Awesome font file to NOT be loaded. only the required icons are loaded, as SVGs. For this, you need to go to Elementor > Settings > Experiments > Inline Font Icons The same is true for eicons too, which is really good.
hi there .. Thank you for the illustrative tutorial... i edited two svg files with SVGOMG .. however ... why when i upload two icons in IconBox (viewbox).. one of the icons distorts the other by breaking it apart or it disappears? ? .. but when i upload a single icon is fine .... thanks you
Hey Nick! Yes this is possible why any problem. Just create your icons in Illustrator, or other vector graphic program, with gradient in them. Then follow the same instructions! Cheers!
My dear friend... i have been looking ofr this tutorial for more than a week .. I am exporting SGV with CorelDraw and is confusing how to set it up.. Thank you .. God Bless you
This is some great stuff Maxime. Working with SVG's can be nerve wracking if one doesn't know what is going on under the hood. Thanks Maxime and keep up the good work.
Thank you Primoz!
Oh my God, this is great!
I've been looking for a ways to fix this problems for over 2years now. This video has saved me today.
thank you so much😊
Hey David! Thank you for the kinds words!
1:30 Ideal Illustrator Export Settings
3:00 Single Color SVGs
14:30 Multi Color SVGs
Thanks for the info! Super useful!
Found the video helpful? Like, Subscribe & Comment to let the RUclips Algorithm know and help me out! Thanks!
That's Awesome Maxime, thank you !
Another great tutorial! Thank you very much.
Pro tip: watch this video at x1.75 or x2 speed.
Wow, this is amazing, thank you so much! A question: I have a 3-color icon, but the code shows about 20 different color codes when I search for 'fill'. Am I doing something wrong? Hope you can help 😅
Great tutorial!
thanks
Awesome tutorial! Thanks a lot
Welcome Wario!
really fantastic. Thank you
Welcome!
@@elementhow691 I think a fantastic followup to this would be how to swap out all of the font awesome icons used by ele to our own so that fontawesome can be removed. I always do the hamburger menu and X, but forget the submenu icons :D
@@1Deduced Yes I see where you are coming from here!
However thankfully there is no longer any need for this, as Elementor finally gives the option to inline the SVG version of the font awesome icons.
this allows the Font Awesome font file to NOT be loaded. only the required icons are loaded, as SVGs.
For this, you need to go to Elementor > Settings > Experiments > Inline Font Icons
The same is true for eicons too, which is really good.
Sweet!
Glad you like it!
Hello, is there a way to leave the icon in a rectangular shape in Elementor? Because my icons are getting square aspect
hi there .. Thank you for the illustrative tutorial... i edited two svg files with SVGOMG .. however ... why when i upload two icons in IconBox (viewbox).. one of the icons distorts the other by breaking it apart or it disappears? ? .. but when i upload a single icon is fine .... thanks you
Try this tutorial : element.how/import-illustrator-svg-elementor/
@@elementhow691Thank you for your kind reply.. ohh ohh... so i need to design the vector with Adobe illustrator?? i am using Corel Draw 2022
so much work for just making an icon. wow
Awesome! Is it also possible to use a color gradient on the icons? Would be very cool!
Hey Nick!
Yes this is possible why any problem. Just create your icons in Illustrator, or other vector graphic program, with gradient in them.
Then follow the same instructions! Cheers!
My dear friend... i have been looking ofr this tutorial for more than a week .. I am exporting SGV with CorelDraw and is confusing how to set it up.. Thank you .. God Bless you
Is it also possible to make an icon turn from 1 color into two colors when hovering on it?
Yes this is possible, but you got to have a good understanding of SVG markup and CSS.