Css applied to just the icon on a modal toggle

Support
#1

I have a modal toggle that has both text and an icon. I want to apply special css to make the icon a gradient color, but i do not want the text to appear that color. How can i achieve this?

I don’t want to have just the camera icon as the model toggle because i want it on the same line as the text beside it, and i also want the text clickable to open the modal.

Thanks

#2

Hey @fxground,

Thanks for writing in! Be advised that the toggle includes both the Text and the Icon. If you want target the icon in your custom CSS,using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:
https://www.youtube.com/watch?v=EY3CCMWD67o

Screenshot 2025-03-21 at 8.54.50 AM
Screenshot 2025-03-21 at 8.54.50 AM1716×962 255 KB

Based on the screenshot above, the container is x-anchor x-anchor-toggle and the icon has x-graphic and x-icon as the containers of the SVG. You can use something like:

.x-anchor.x-anchor-toggle .x-graphic .x-icon {
    /* your styling */
}

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Both the Text and the Icon are clickable to trigger the Modal.

Best Regards.

#3

Thanks. Yes, I can do it that way, i was hoping though there might be a way to do it without having the custom css code. On that note, my font awesome icons are loaded as SVG as I like that crisp look. So instead of changing them back to a webfont, Is there a built-in setting or recommended method for applying custom styles—like multi-gradient fills or animations—to the SVG icons?

Could you point me to any documentation or best practices for customizing SVG icons in Themeco X Pro, especially for applying complex CSS effects like gradients?

#4

Thank you for the update.

Unfortunately, there is no option to apply gradient fills to SVG icons. You will need to apply this manually using custom css and possibly html. You can also create your own SVG using existing design tools like Illustrator and upload it to the site.

To apply animations to elements, please refer to the documentation below to learn more about the Effects Module .

– https://theme.co/docs/effects-module

Let us know if you need more info.

#5

Thanks - Is it support using a JavaScript-based SVG injection tool (such as SVGInjector) to inline external SVGs for advanced styling?

#6

Based on the SVGInjector documentation, the SVG injection script requires an <img> tag, so you may need to upload your own SVG images and you won’t be able to use it on the existing SVG icons. You may need to manually insert the <img> tag in a Text or Raw Content element or use the Image element.

#7

Thanks, i think the img way is the way to go. Thanks for helping make me realize this …

#8

Glad we could be of help! Please feel free to open another thread if you have more questions. Have a nice day.