Updating SVG Icons

[HB]

Hi there,

Are we able to edit these icons? Or better yet add new ones?

Really loving the new set but the colours don’t fit without our colour scheme.

Cheers,
Tim

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

You can add your own here: Theme Options => Icon Fonts.

You can also amend those icons to use your own within the page builder:

[bedigital]

Hi,

I would like to use this function but I think It didn’t work for me (pressed the button but nothing happened): You can add your own here: Theme Options => Icon Fonts. I tried to find the solution in the template’s manual, but I didn’t find anything in it.

Can you help me how should I use the Icon Fonts function?

Greets,
Bela

[David Martin – Support]

Please provide more details of what you are trying to use?

What icon font is it, or the zip file to the icon font.

[tiago]

David/Bela

I had the same problem.

The Add Font button in Theme Options > Icon Fonts isn’t working.
Fortunately, there is also an Add Font button right at the top in Theme Options > Font Options and that one works!

Regards

[tiago]

Bela,

I’ve added some print screens with instructions on how to use custom icons, since adding the font alone doesn’t make them available for easy use (at least in my experience) and requires a little custom CSS.

1. After adding your custom icon font as I explained above, add an icon-box element to the page, click edit but, instead of choosing ICON in the ICON BOX ICON TYPE field, select CHARACTER and type the letter that corresponds in the font to the icon you want.

2. In the Misc Options tab of the same window, give a unique class name (ex. youricons) to identify any icons that use that font on the website.

3. Finally, just add this code in Theme Options > Custom CSS/JS:

.youricons {
    font-family: iconfontname;
}

Just one note that if the font name has more than one word and spaces in between (say “icon font name”), you need to add quote marks before and after:

.youricons {
    font-family: "icon font name";
}

That should do the trick.
Regards

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi @tiago, wow thanks so much for sharing this with Bela.

@Bela – let us know how you get on.

– David.

[bedigital]

Hi,

@tiago: thank you very much for your help! 🙂

@David: Okay, I’ll write my experience.

[David Martin – Support]

Great, thanks.

[tiago]

@Bela: Most welcome. 🙂

@David: I felt I owed you that, after you went out of your way to come into my home and fix my memory issue. What goes around, comes around. If we all share our solutions, I’m sure it will make everyone’s life much easier.

Tiago

[Swift Ideas – Ed]

Thank you @tiago – always appreciated.

On a further note on this, we are improving the icon setup, so that you can easily add svgs to a child theme folder and have them picked up by the builder for use.

Thanks,

– Ed

[theagent]

Hi

I am also stuck with adding custom SVG icons to my theme / child theme.
I have created 6 SVG icons that i want to use. How can i have them picked up by the framewrok or how can i add them to the options list inside the icon box?

Thanks

[David Martin – Support]

@theagent – the work for this I believe is currently under developement, let me check this with Ed.

– David.

[theagent]

Hi

Thanks. Can you also tell me when it will be available if is under work?

Cheers

[David Martin – Support]

Hi,

We are planning for a 6-8 week timeframe.

Thanks,
David.