This is regarding a Wordpress site, v4.4.2. The issue has been occurring for some months. It use to only occur on Firefox (no idea why). As of very recently it occurs on all browsers (I've checked Safari, Chrome, and Firefox, on two different computers [both Mac]).

Symbols such as some of the icons in the left side-bar in wp-admin don't display, and then all icons in the theme I use (Divi, by Elegant Themes) show up as numbers and other odd characters. At first I thought this might be a theme issue, but as it affects the wp-admin sidebar, and changing the theme makes no difference, it seems something else is causing it.

Here are some screen-clips showing what I mean:

1) Shows wp-admin sidebar, with issues boxed in yellow

Sidebar showing missing icons indicated in yellow

2) Shows "Divi Builder" with issues indicated in yellow

"Divi Builder, with issues icon issues indicated in yellow

3) Shows "Divi Builder" the way it is supposed to appear

Divi Builder, as it should appear

Any suggestions on how to determine the cause of this issue would be greatly appreciated.

up vote 0 down vote accepted

Okay... so just as I was completing this question I figured out the cause.

Using Firebug (in Firefox) I would see a lot of errors regarding access to svg and woff and ttf files under /wp-content/ was blocked. Errors like:

"NetworkError: 403 Forbidden - https://www.inspirednutritionals.com/wp-content/plugins/sg-cachepress/css/logo-white.svg"

"NetworkError: 403 Forbidden - https://www.inspirednutritionals.com/wp-content/themes/genesis/lib/css/fonts/genesis-icon.woff"

Seeing this, I realised when we recently hardened up the security of this site, there was code added to the .htaccess in /wp-content/ as follows:

Order deny,allow Deny from all <Files ~ ".(xml|css|jpe?g|png|gif|js)$"> Allow from all </Files>

The file types (that access to is allowed) does not include those used for the icons.

I have modified this line to include the missing file types:

<Files ~ ".(xml|css|jpe?g|png|gif|js|svg|woff|ttf)$">

Problem solved.

I am posting a record of this just in case it helps someone else who follows similar steps (recommended on numerous sites and blogs) for hardening security, and ends up with lost icons, etc.

  • Speaking of security, the . in .(xml|css)$ will match any character, so files ending with style.scss, anyfile.iwantcss, etc will also match. If you want to match the dot character in regex, you have to escape it: \.(xml|css)$. – kovshenin Apr 2 '16 at 10:42
  • Thanks Kovshenin. That's a good point. I got that security stuff from someone else, and didn't see that omission. Fixing it now. Cheers. – omega33 Apr 8 '16 at 10:12

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.