Icon file-uploads

Flamingo 05 Dec, 2025

How can I change the file upload icon to image in Chronoform 8, for example using a template override or CSS?

Max_admin 05 Dec, 2025
Answer

Enable the Field Class behavior for your field and set any class.

Then use a CSS like this one:

.field_class label svg{
display:none;
}
.field_class label::before{
// whatever css for your new image here
}

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Flamingo 06 Dec, 2025

Thank you so much for your information!

Hiding the file icon works, but I haven't been able to insert a different icon using this:

`.upload_icon_dis label::before { `content: '<svg class="fasvg icon image" xmlns="http://www.w3.org/2000/svg"</svg>';`

or similar CSS entry. What do I need to change?

Max_admin 06 Dec, 2025

Hi Flamingo

This is not a correct content property, here is an example of a correct one:

content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>');

You can get the <svg code from Font awesome or other icon libraries.

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Flamingo 07 Dec, 2025
1 Likes

Okay this Code works.

Thank you for support.

Post a Reply