If you’ve worked with the Avada theme, you’ve probably had to deal with the missing icons ( ie: pesky little squares). No worries, there are a few scenarios when Font Awesome icons or Custom Fonts might not show up. Read below to see the most common causes of this issue and how to fix it.
Fonts Hosted On Different Domain
All browsers require fonts to be hosted on the same domain (and a sub-domain is considered a separate domain name). If your Font Awesome Icons or custom fonts are not showing up in a certain browser (mainly Firefox or IE), then you have two solutions for the issue.
1. Host the font on the same domain as the domain where the website is accessed.
2. Create or edit the .htaccess file in the root folder on the same domain where the fonts are hosted, and add the following code into it:
<FilesMatch “.(eot|ttf|otf|woff)”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>
Font Awesome Subsets Not Selected
Another scenario when the Font Awesome icons do not show, is when no Font Awesome font subset is selected in the Theme Features section of the Theme Options (Avada > Theme Options > Advanced > Theme Features > Font Awesome). Ensure at least one subset is selected.
After Site Migration
In some cases, when users migrate sites, the Font Awesome files can still show a path to the old site, and this causes the font to now show. Resetting the Fusion Caches easily fixes this (Avada > Theme Options > Performance > Reset Fusion Caches).
Wao, it was beneficial for me, As a web designer, your guidelines are so helpful for me. Thank you for sharing.
Hey,
sometimes it has nothing to do with settings, caches, ssl or a wrong domain. if you add an iconfont with the wrong settings, for example from icomoon it can break font awesome icons too. in this case you have to play with the preferences from the icomoon font. (changing the css selector, class prefix etc.)
Agreed. But this post was primarily for a simple fix for Avada update issues. But yes Danny, I agree with your comment. Now that you can add your own custom icons sets in Avada, we run into different issues with sets not rendering. One of the things we’ve found is that icons with color backgrounds are problematic.
Performance ->Reset Avada Caches fixed our issue after migration, thanks!
Glad it worked for you!
Thanks for this post, the site migration clearing of caches worked for me.
Glad it helped! It’s always the easy ones that get me 😉