Is there a page load benefit for doing it this way? One problem I see is for people who don’t know how to write/edit the code inline. It’s not going to be very useful for them.
@@touchdowntech The page load benefit would be the same as using svg icons. I agree not the best method for those who like WYSWYG customisation but most powerful to customise svgs as much as you want.
@@touchdowntech Haven't watched the video yet but I upload the SVG to the media library. Bricks SVG element will load the SVG inline automatically so you get the benefit of being able to access the SVG via CSS to change the colors etc... while still having one source of truth for the SVG itself.
@Tom-pl4co Not always possible to do some customisations. For example if you have a site with light and dark mode and it has logo in svg format and want that logo to be light in dark mode and dark in light mode, the only possible way would be to use svg code in code element and target it via variables to achieve such customisation.
Thank you for the video! Really helpful. I changed my icons to svg icons on my site now. I want to give one of the icons gradient colour. Is there any way to do that? I want to give Instagram a gradient colour to match its colour. Thanks in advance!
Thanks @Jornes83 I haven't done that but from doing some Googleing should be possible. If you ask ChatGPT, "How do I style an SVG fill with a gradient using CSS?" you will get a helpful answer.
@@touchdowntech Thanks for your reply! Yes. I did ask help from ChatGPT. I copied the SVG code from Fontawesome, and asked ChatGPT to modify it for me. It worked. I wish there had such an option to do it (choose gradient colour) directly in the builder. :)
Thank you for sharing! I saw some people manually enque fontawasome css and only the icons they use get loaded instead of uploading all icons to the media. I checked the dom and the icon appears something like "/35788" even not SVG you can download. I don't know how they do it.
It's just a custom icon font. Many libraries allow you to pick and choose all the icons you will actually use and then it generates an icon font that only has the selected icons. It's obviously smaller than an icon font that includes every icon. All the popular icon providers do this now. But really, if you only need 8 icons, is it better to put them in the media library, or go through all the trouble of creating a custom icon font?
@@vigilantezack One of the sites that you can do this through is Fontello. I've actually been learning the process because I want to cut down potential points of failure or loading times, minimizing what actually gets loaded... that and and I saw someone suggest Fontello for this purpose. 🙂
![Stromae, Pomme - “Ma Meilleure Ennemie” (from Arcane Season 2) [Official Visualizer]](http://i.ytimg.com/vi/1F3OGIFnW1k/mqdefault.jpg)
I think the best method would be to use the code element and paste svg code in it. Then we can edit svg via inline css.
Is there a page load benefit for doing it this way? One problem I see is for people who don’t know how to write/edit the code inline. It’s not going to be very useful for them.
@@touchdowntech
The page load benefit would be the same as using svg icons. I agree not the best method for those who like WYSWYG customisation but most powerful to customise svgs as much as you want.
@@touchdowntech Haven't watched the video yet but I upload the SVG to the media library. Bricks SVG element will load the SVG inline automatically so you get the benefit of being able to access the SVG via CSS to change the colors etc... while still having one source of truth for the SVG itself.
Exactly. the best of both worlds.
@Tom-pl4co
Not always possible to do some customisations.
For example if you have a site with light and dark mode and it has logo in svg format and want that logo to be light in dark mode and dark in light mode, the only possible way would be to use svg code in code element and target it via variables to achieve such customisation.
Thank you for the video! Really helpful.
I changed my icons to svg icons on my site now. I want to give one of the icons gradient colour. Is there any way to do that? I want to give Instagram a gradient colour to match its colour.
Thanks in advance!
Thanks @Jornes83 I haven't done that but from doing some Googleing should be possible. If you ask ChatGPT, "How do I style an SVG fill with a gradient using CSS?" you will get a helpful answer.
@@touchdowntech Thanks for your reply! Yes. I did ask help from ChatGPT. I copied the SVG code from Fontawesome, and asked ChatGPT to modify it for me. It worked. I wish there had such an option to do it (choose gradient colour) directly in the builder. :)
Thank you for sharing! I saw some people manually enque fontawasome css and only the icons they use get loaded instead of uploading all icons to the media. I checked the dom and the icon appears something like "/35788" even not SVG you can download. I don't know how they do it.
Interesting. What video or channel was that on?
It's just a custom icon font. Many libraries allow you to pick and choose all the icons you will actually use and then it generates an icon font that only has the selected icons. It's obviously smaller than an icon font that includes every icon. All the popular icon providers do this now. But really, if you only need 8 icons, is it better to put them in the media library, or go through all the trouble of creating a custom icon font?
@@vigilantezack One of the sites that you can do this through is Fontello. I've actually been learning the process because I want to cut down potential points of failure or loading times, minimizing what actually gets loaded... that and and I saw someone suggest Fontello for this purpose. 🙂
Thank you
You're welcome!