Fonts, Arrows or Icons Do Not Display, or Display as Squares

When icons, arrows or other elements in your WPtouch themes appear as squares, blank, as different characters, or do not appear at all, it means the FontAwesome, Fontello or WPtouch Icons module is not loaded properly, or something is blocking the font from being loaded.


Cross-Origin Block


One possible reason is due to CDN usage, and may cause the icon to load in some browsers, while not in others due to how tightly the browser has implemented blocking cross-origin resource sharing policies.


e.g. Console error in Chrome for Android:

 

(index):1 Font from origin 'http://www.static.site.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.site.com' is therefore not allowed access.

  


Other Reasons


If you are using WPtouch 3.6+ and are experiencing this issue, please update the theme to the latest version.

If your WPtouch installation is running a copied theme from an earlier version, open /wp-content/wptouch-data/themes/_THE_COPIED_THEME_/root-functions.php and add the code below to the list of active modules:

 

'wptouch-icons',

 

If that fails to work, add:

 

'wptouch-icons-old',

 

right below 'wptouch-icons',.



Some web servers are not yet providing the correct MIME type for these files. The following configuration in an .htaccess file will provide the correct MIME type for web fonts:

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

If the Footer Social Links are not displaying the icons check that the latest version of WPtouch and the latest version of the active WPtouch theme is running. If the WPtouch installation is using a copied theme from a previous version,  add the custom CSS below to the style.css file of the copied theme (/wp-content/wptouch-data/themes/_THE_COPIED_THEME_/default/style.css

 

.icon-twitter:before { content: '\e81b'; !important }
.icon-google-plus:before { content: '\e81c'; !important } 
.icon-google-plus-sign:before { content: '\e81d'; !important }
.icon-facebook:before { content: '\e81e'; !important } 
.icon-facebook-sign:before { content: '\e81f'; !important } 
.icon-instagram:before { content: '\e820'; !important } 
.icon-tumblr:before { content: '\e821'; !important } 
.icon-pinterest:before { content: '\e822'; !important } 
.icon-pinterest-sign:before { content: '\e823'; !important } 
.icon-vine:before { content: '\e824'; !important } 
.icon-book-open:before { content: '\e825'; !important } 
.icon-youtube:before { content: '\e826'; !important } 
.icon-linkedin-sign:before { content: '\e827'; !important } 
.icon-plus:before { content: '\e828'; !important } 
.icon-rss-sign:before { content: '\e829'; !important }

 

If that fails to work, remove or comment out the previous declarations for the footer social links, starting on or around line 1997 of /_THE_COPIED_THEME_/default/style.css.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us