Custom Icons

[bedigital]

Hi,

this topic is relates to: this post.

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

I attached the icon pack in webfont formats and in separately SVGs too.

Attachments:

You must be logged in to view attached files.

[bedigital]

This reply has been marked as private.

[David Martin – Support]

Please add your FTP details.

Thanks.

[bedigital]

This reply has been marked as private.

[David Martin – Support]

1) Uploaded your svgs to /images/svgs/ within the theme folder.

2) Within the child theme functions.php file, I have added the sample function to pull in the 3 test SVG’s to confirm everything is working. These would appear at the bottom of the list.

	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['actualize-arrows-couple-in-circle'] = 'Actualize-Arrows-Couple-in-Circle';
				$icons['battery-status-symbol'] = 'Battery-Status-Symbol';
				$icons['battery-tool-with-bolt-sign'] = 'Battery-Tool-With-Bolt-Sign';
				// return icons
				return $icons;
			}
			add_filter('spb_outline_svg_icons', 'custom_svg_icons');
		}
		add_action('init', 'custom_svg_filter_function');

You can now add the rest of the SVG to the list.

– David.

[bedigital]

Hi David,

thank you for your help!

I checked the icons on the admin and on the site, too, but it doesn’t work well. I attached screenshots. I don’t know what’s the problem with it.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please test now, it is working. I just update the 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['actualize-arrows-couple-in-circle'] = 'actualize-arrows-couple-in-circle';
				$icons['battery-status-symbol'] = 'battery-status-symbol';
				$icons['battery-tool-with-bolt-sign'] = 'battery-tool-with-bolt-sign';
				// return icons
				return $icons;
			}
			add_filter('spb_outline_svg_icons', 'custom_svg_icons');
		}
		add_action('init', 'custom_svg_filter_function');