Icons (non-Latin symbols) displaying incorrectly

Question

Icons (non-Latin symbols) displaying incorrectly

omega33

2021年6月29日 00:43

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

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

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

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

Topic characters Wordpress

Category Web

omega33 · Accepted Answer · 2021年6月29日 00:43

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.domainname.com/wp-content/plugins/sg-cachepress/css/logo-white.svg"

"NetworkError: 403 Forbidden - https://www.domainname.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:

    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.

Icons (non-Latin symbols) displaying incorrectly

About