Updating SVG Icons

[theagent]

Ohh my, not good. I need to launch website in couple of days.

What do you propose for me to be able to use my own SVG icons and preferably content to be editable from wp-admin?

TY

PS: editing files is no issue, just tell me what and where to edit to use my icons. Not a problem if i need to drop other ones.

[Swift Ideas – Ed]

Hi there,

You’d need to add your svgs to /images/svgs/ within the theme, and then add the following code to your child theme:

function custom_svg_icons( $icons ) {
// add a line like the below for each svg file, where 'icon-file-name'
// is the name of the svg file, without .svg on the end
$icons['icon-file-name'] = 'icon-file-name';
// return icons
return $icons;
}
add_filter('spb_outline_svg_icons', 'custom_svg_icons');

Hope that helps.

– Ed

[theagent]

Hi

Thanks for the tip, but unfortunately this does not work.

I followed the advice carefully and exactly as described, but the icons are not picked up.

Maybe missing something?

TY

[David Martin – Support]

Have you added this $icons['icon-file-name'] = 'icon-file-name'; for each SVG name and changed icon-file-name to match the SVG name?

Please post your code so we can see what you have tried.

– David.

[theagent]

Of course. here it is:

function custom_svg_icons( $icons ) {
// add a line like the below for each svg file, where ‘icon-file-name’
// is the name of the svg file, without .svg on the end
$icons[‘agent-Arrows’] = ‘agent-Arrows’;
$icons[‘agent-Camera’] = ‘agent-Camera’;
$icons[‘agent-Compass’] = ‘agent-Compass’;
$icons[‘agent-Computer’] = ‘agent-Computer’;
$icons[‘agent-edata’] = ‘agent-edata’;
$icons[‘agent-Microphone’] = ‘agent-Microphone’;
$icons[‘agent-Panier’] = ‘agent-Panier’;
$icons[‘agent-Plane’] = ‘agent-Plane’;
// return icons
return $icons;
}
add_filter(‘spb_outline_svg_icons’, ‘custom_svg_icons’);

[Swift Ideas – Ed]

Apologies for the delay, please try this code:

	function custom_svg_filter_function() {
		function custom_svg_icons( $icons ) {
			// add a line like the below for each svg file, where 'icon-file-name'
			// is the name of the svg file, without .svg on the end
			$icons['agent-Arrows'] = 'agent-Arrows';
			$icons['agent-Camera'] = 'agent-Camera';
			$icons['agent-Compass'] = 'agent-Compass';
			$icons['agent-Computer'] = 'agent-Computer';
			$icons['agent-edata'] = 'agent-edata';
			$icons['agent-Microphone'] = 'agent-Microphone';
			$icons['agent-Panier'] = 'agent-Panier';
			$icons['agent-Plane'] = 'agent-Plane';
			// return icons
			return $icons;
		}
		add_filter('spb_outline_svg_icons', 'custom_svg_icons');
	}
	add_action('init', 'custom_svg_filter_function');

Have tested that locally and definitely adds the icons, but they won’t appear correctly in the list (they will show a clock icon). I’ll fast track the change to the setup, so that you can add the svg files to a folder in your child theme, and they’ll automatically get picked up. We’re hoping to release this next week.

– Ed

[theagent]

OK, We see them at the end of the list but for us they are arrow-down icons. I guess they pick up the last in list. So we betetr wait for the update. Thanks!

[Swift Ideas – Ed]

No problem, doing our best to get the update out as soon as possible, but have lots of performance improvements we need test thoroughly.

– Ed

[bedigital]

Hi,

I’m back. 🙂

I tried tiago’s solution, but unfortunately it didn’t work for me. I think because I don’t know the characters what correspond in the font. I have only the glyph’s like this: “uniF10B” or “” and icon classes, for e.g.: flaticon-battery-status-symbol but these codes didn’t work. 🙁

Have you got any idea? Or is there hope that you will repair the upload button in the Custom Icon function?

Greets,
Bela

[David Martin – Support]

Hi Bela,

For the above method, that is specifically for SVG icons.

What icon format are you wanting to use?

– David.

[bedigital]

Hi David,

I have the icons in eot, svg, ttf, and in woff format.

From the SVG format I have the icons in one file (collection), and I have the icons separately, too. If I’m right I have to upload the collection from the SVG format.

If It is possible I would like to use SVG format.

Sidenote: I tried to upload icons in the Theme Options -> Icon Fonts but in this option the Add Icon Font button didn’t work. So after that I tried to upload the icon font in the Theme Options -> Font Options. Here I uploaded succesfully the font in many formats, but in the Icon Fonts I didn’t find it, and I could’nt use the new icons in the Icon Box too. It would also be helpful If the Icon Fonts menu would work.

– Bela

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi Bela,

Can I ask what the icons are or can you link me to the icon pack.

I’d ask you to open a new thread so you can privately add your WP login details for me and I can help you to add the icons.

[bedigital]

Hi David,

I opened a new topic here.

[David Martin – Support]

Awesome thanks, please install and activate the supplied child theme which is found in the main TF zip download and I will assist you there.

[bedigital]

Hi David,

I activated the child theme. What’s the next step?

Greets,
Bela