Adding Custom Icon Fonts

[Stephen]

Hi guys,

Tried this in a number of different ways.

1.

– Added my own custom font files to the fonts folder, call it, onesocialdemo.
– Added my stylesheet in the css folder.
– Added the following to the theme-functions.php

// OneSocial icon fonts.
wp_register_style( ‘icons’, $CSS_URL . ‘/onesocialdemo-icons.css’, array(), ‘1.0.2’, ‘all’ );
wp_enqueue_style( ‘icons’ );

– I then tried styling some obvious areas, the search icon for instance, in the child-themes custom.css, and it didn’t work.
– I then tried it in custom codes area in the admin panel and it threw me the following error:

“Unsafe strings were found in your CSS and have been filtered out.”

– It seems it didn’t like the backslash in:

content: “\e900”;

2.

– As such, I then tried to overwrite the existing onesocial font files/stylesheet by uploading the svgs to icomoon. I added the icons I wanted and omitted the according icons from the original set. I also, replicated the names and characters to match the original set that I was replacing.

– When I generated the font however, the output was still characterized as:

.bb-icon-camera:before {
content: “\61”;
}

Instead of:

.bb-icon-camera:before {
content: “a”;
}

– I couldn’t find a way to resolve this with any of the icon generators.

– The last step I tried was overwriting just the original font files (eot, svg, ttf, off) with the new output which resulted in no changes.

Are there any missteps I’m taking here or recommended best practice for doing what I am attempting to do?

Thanks

[Anve S.]

Hi @stephen,

I extremely apologize for the delayed response. I want to know if you still have this issue .Please tell me what custom icon you are trying to put and where actually . It would be great if you explain it with a screenshot.

Regards
Anve

[Stephen]

Hi @anve,

No worries. I’ve attached a screenshot with the specific icons and areas I would like to rework.

I understand some of these areas like the mobile carousel is just fontawesome and should be straightforward, however, as explained above, when making customizations I get the “unsafe strings error.”

I am wondering if it has to do with my site being https and fontawesome being loaded as http. I might be mistaken, but I am getting thrown a lot of “unexpected css token” warnings, including, insecure content being loaded from “” which has been breaking my ssl.

That being said, I noticed the last issue had been raised elsewhere and will be included in the next update. I’m just bringing it up because I am wondering if some of this can be simplified by making the http/https distinction.

Let me know and as always, thank you for your help.

[Anve S.]

Hi @stephen,

Sorry but our theme currently do not support the customization options for menu icons that you are asking for . But you can take the reference of how we have used Fontawesome in our theme , this will require some custom coding from your side . Also you may raise this requirement of yours in WordPress forum.

Regards
Anve