Font icons not rendering

7.61K viewsIssues
1

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.

0

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 =(…

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

0

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:

  1. Download AnsPress font icon from here: Font Icon
  2. Unzip and upload to any other server which allow direct access to file (not same domain, else cloudflare will minimize it).
  3. 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.
  4. 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.

  5. Save, and done.

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?

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.

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?

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

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

Ok, thank you