The icons – including submenu indicator arrows – for example in UberMenu are font icons. Some browsers – most commonly Firefox – enforce a Cross-origin resource sharing (CORS) restriction policy for fonts. As a result, if you serve the Font Awesome fonts from a separate domain, Firefox (and depending on your server configuration, other browsers as well), will not load the fonts due to this policy, so the icons are not displayed.
CDN (Content Delivery Network)
The most common occurrence is using a CDN. For example, if your site is mydomain.com, but your stylesheets are served from cdn.mydomain.com, or cdn.someotherdomain.com, the browser will not load the fonts because they are served from another domain.
The Solution
There are two options to resolve the issue: either serve your fonts from the same domain as your site, or configure the fonts on your secondary domain to be served with the appropriate headers to allow cross-origin resource sharing.
Serve the files from the same domain
This generally means that you would exclude the Font Awesome files from your CDN, and link the files on your main server instead. The font file itself is the important resource, but generally this would come down to excluding the Font Awesome stylesheet. If you’re using UberMenu’s copy, it is found at
/wp-content/plugins/ubermenu/assets/css/fontawesome/css/font-awesome.min.css
This solution will work, but you won’t be able to take advantage of your CDN for these files.
Set the font headers to allow cross-origin resource sharing
This means that you would configure your server to tell the browser that it’s okay to load these resources from a different domain.
What you’ll need to do is set the Access-Control-Allow-Origin header to * for the fonts. If your server is running apache, this generally just means dropping an .htaccess file into the directory containing the font with the following configuration
<FilesMatch “.(eot|ttf|otf|woff)”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>
You may have to check your Theme directory if you are not using UberMenu’s Font Awesone…
wp-content/themes/theme_name/fonts and simply add the file
.htaccess in the directory!
UberMenu’s Font Awesome assets are located in /wp-content/plugins/ubermenu/assets/css/fontawesome/fonts/
[Experimental] for SSL website
Header add Access-Control-Allow-Origin “https://www.domain.com”
#Header add Access-Control-Allow-Origin “https://domain.com”
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]