Font icons not rendering

Question

Font icons not rendering

8.47K viewsJuly 18, 2015Issues

1

Jef_Vantongerloo 246 Posted July 5, 2015

Firefox and Chrome do not display plugin images: thumbs, more button, …
In Internet Explorer 11 everything works fine.

http://bit.ly/1eJi2mf

Already tried to put Cloudflare in development mode to disable the JS Rocket Loader, Cleared all cache, …

Thank you for looking into this.

2 Answers

score 0 · Answer 1 · 2015-07-14T19:41:02+00:00

0

3rGk 2 Posted July 14, 2015 1 Comment

Hmm…I might need that detailed instruction. I tried the steps above, modified the functions.php, uploaded files to S3, made them public, made sure linked to S3…but still boxes =(…

Rahul Aryan commented July 14, 2015

send me your site detail if you want us to setup, also link to your fonts. [email protected]

score 0 · Answer 2 · 2015-07-11T08:47:29+00:00

0

Rahul Aryan 30.96K Posted July 9, 2015 7 Comments

I confirm this is not bug and nither conflict with FontAwesome.

Issue is due to cloudflare, I don’t know why its happening BUT its confirmed due to cloudflare.

I tried loading apiocn from other site and it works well.

You can ask for support to cloudflare (but they are slow).

Or you can follow this steps:

Download AnsPress font icon from here: Font Icon
Unzip and upload to any other server which allow direct access to file (not same domain, else cloudflare will minimize it).
Now copy “wp-content\plugins\anspress-question-answer\theme\default\functions.php” to “wp-content/themes/YOUR_ACTIVE_THEME/anspress/functions.php“. Create folder if does not exists.

Now copied file in text editor and edit line 47,

wp_enqueue_style( 'ap-fonts', ap_get_theme_url('fonts/style.css'), array(), AP_VERSION);

to

wp_enqueue_style( 'ap-fonts', YOUR_LINK_TO_FONT, array(), AP_VERSION);

Replace YOUR_LINK_TO_FONT to where you uploaded the font.

Save, and done.

3rGk commented July 11, 2015

I only have shared hosting (cpanel). Cloudflare is available on my hosting service but I have not activated yet for this domain. I am still assuming this is what is causing the font problems.

Anybody have any suggestions on where I can put the font files and still be accessible? Will it work on free file hosting services like filedropper.com, etc? If not, is there any other solution?

Rahul Aryan commented July 11, 2015

I suggest http://aws.amazon.com/s3/, its free for first year. But I think you dont have to pay from next year ethier, they have some free usages. also you can use drop box too, but remember to change font url in style.css.
If you are not expert user I will write a detailed instruction for you.

Jef_Vantongerloo commented July 17, 2015

I investigated some more and still think it has nothing to do with the CloudFlare service.
After activating the development mode and pass through DSN requests, Anspress has the same problem.

I found out the Anspress font is not loading correctly due to the ‘-rdrqlm’ suffex.
When you drop this, the path to the font is parsed and icons are showing up.

What is this suffix used for, versioning?

Rahul Aryan commented July 18, 2015

Oh that one ? ok I will remove them. Thanks for letting us know.

Jef_Vantongerloo commented July 18, 2015

I’m just curious what is it used for? Versioning?

Rahul Aryan commented July 18, 2015

Yes 🙂

Jef_Vantongerloo commented July 18, 2015

Ok, thank you