0

I created a WordPress Azure Website through the Azure Websites Gallery. I installed a theme called Bridge.

Everything is working quite fine...Except, I have no icons appearing on the desktop version of my site (through Chrome, Firefox and IE). I am seeing icons on my Windows phone. I am not seeing icons on the desktop site when I squeeze the window down to mobile phone size.

To give you some background to where this problem is potentially coming from… I have used a custom domain. To make the WordPress site work with a custom domain, I have added this code to the wp-config.php file:

/*Emma added the below to fix permalink to be custom domain*/
define('WP_HOME','http://examplesite.com');
define('WP_SITEURL','http://examplesite.com);

The code above meant that once you clicked on a post or page and moved away from the homepage, the url was still examplesite.com/pagename instead of examplesite.azurewebsites.net/pagename.

So back to the icon issue…

The icons are displayed through using a font (font-awesome to be exact). I have the latest updates of the theme and the latest 4.2.0 version of the font is in the font files. The font files can be found here in my site:

wp-content > themes > bridge > css > font-awesome > fonts

enter image description here

I asked the Bridge theme team why the icons were not displaying. They replied:

This is happening because of cross-origin access is denied for your site. You should paste this code to htaccess file that is located in WP installation directory:

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: http://examplesite.com
</ifModule>

I do not have an .htaccess file because my site is running on Azure. From what I understand .htaccess files are linked to Apache. Instead of a .htaccess file, I have a web.config file and a web-config.php file because I installed this from Azure.

I created a .htaccess file in the root of my website and pasted the above code. Of course that didn’t work. I also looked up how to write the web.config version of the code and pasted that into the web.config file and that did not work (although with my little knowledge of this area, the syntax is probably wrong) and that didn’t work. See the code below:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://examplesite.com" />
  </customHeaders>
</httpProtocol>

I also added this to the web.config file and that hasn't worked:

    <remove fileExtension=".svg" />
    <remove fileExtension=".eot" />
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".woff" mimeType="application/x-woff" />

I have read that I need to also change the buildAction to "content", but not sure how to do that as when you click properties of files such as .woff, you don't seem to get that option.

I also played around with adding something to the web.config.php file under the custom code I wrote to get my domain to work, but that didn’t work either. Once again, not sure my code was correct.

I went back to the support team at the Bridge theme and they said that I should contact my hosting provider to do this for me because .htaccess can’t work on this type of server.

So, now I am not quite sure what to do.

Does anyone know the correct code I should put into my web.config, web-config.php or other file? Or, is there another issue here I am not understanding? Perhaps something as simple as adding something to the custom css to call to the font?

I wonder if there is a clue in the statement I made above... "Everything is working quite fine...Except, I have no icons appearing on the desktop version of my site (through Chrome, Firefox and IE). I am seeing icons on my Windows phone. I am not seeing icons on the desktop site when I squeeze the window down to mobile phone size."

If I can see them on my phone, then surely that means at some point the icons are being rendered correctly?

I have had a look through my css files for a change in a way the site is rendered through media queries, but didn't find anything there either.

CodingCockatoo
  • 41
  • 5
  • Can you right click on one of the icons where it is supposed to be and look at the URL that is being outputted into the page? That may help diagnose whats going on. – Robbiegod Nov 06 '14 at 20:50
  • The html of the icon: – CodingCockatoo Nov 06 '14 at 21:08
  • The CSS.../*media all*/ .fa-search::before { content: "\f002"; } – CodingCockatoo Nov 06 '14 at 21:09
  • ok, so maybe look for the line in the css that imports those fonts. It may be in the font-awesome.css. See what that path is. – Robbiegod Nov 06 '14 at 21:11
  • Not sure where to find this elusive url. The css when I inspect is coming from font-awesome.min.css. – CodingCockatoo Nov 06 '14 at 21:14
  • See this thread: http://stackoverflow.com/questions/13309138/how-to-get-fontawesome-to-work-on-an-azure-web-pages-deployment – Robbiegod Nov 06 '14 at 21:14
  • Thanks @Robbiegod I will try that solution from stackoverflow.com/questions/13309138/… – CodingCockatoo Nov 06 '14 at 21:15
  • I have added the code to my web.config file, created a new font file at the root of my site with the font-aweseome files in it. The bit I don't understand now is the last instruction on this link which was "Build Action was set to Content for all". Any tips on how to do that? – CodingCockatoo Nov 06 '14 at 21:38

1 Answers1

2

After many hours of searching for a solution I found this post: Windows Azure CDN and *.woff fonts

I copied this code into my web.config file as a child of system.webserver:

 <httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="HEAD,GET,OPTIONS" />
  </customHeaders>
 </httpProtocol>

That seemed to solve it! :)

Have tested in Chrome, FireFox, IE and mobile and all icons are now showing. Magic!

Community
  • 1
  • 1
CodingCockatoo
  • 41
  • 5