2

I have the font-awesome icon-font working on my locahost as well as my mysite.com which are both nginx servers. Strangely, when I tried to implement a similar icon font set from Glyphicons the icons only render on mysite.com but not on my localhost.

Here's what the icons look like normally vs. how they look on my localhost:

normal: normal busted: busted

The problem is that the font-family: 'Glyphicons' attribute is not being recognized on my localhost because simply commenting out the font CSS property on mysite.com re-creates the red box appearance:

.glyphicons i::before {
  position: absolute;
   left: 0;
  top: 0;
  font: 24px/1em 'Glyphicons'; // commenting out this line re-creates the red box pattern
  font-style: normal;
  color: #1D1D1B;
  color: red;
 }
tim peterson
  • 23,653
  • 59
  • 177
  • 299
  • You're making assumptions that the problem is *'Glyphicons' attribute is not being recognized [...]*. I'd guess that you simply havent added the necessary `@font-face`-definitions in whatever you run on localhost. If that's not the case, I'd love to help but can't with the sparse information given. – joar Dec 14 '12 at 22:01
  • hi @Joar, thanks, the [glyphicon CSS file](https://gist.github.com/4289075.git) is identical. In fact my entire application code on my localhost and mysite.com is identical as both are the under version control and are at the latest version. – tim peterson Dec 14 '12 at 22:04
  • http://stackoverflow.com/a/8484466/202522 and http://stackoverflow.com/q/11872404/202522 might help. – joar Dec 14 '12 at 22:15
  • 3
    I also think its a false assumption. Just because you could re-create the problem by commenting out that line on the server doesn’t mean that this is the problem on your localhost. Maybe file permissions are worth looking into? – David Hellsing Dec 14 '12 at 22:17
  • oh yeah, file permissions! that was it, duh tim! perhaps you can add this as an answer(?) and I'll accept it. This is the code to change all files and subdirectories within my Glyphicons folder: `chmod -R 777 assets/glyphicons/` – tim peterson Dec 14 '12 at 22:32

1 Answers1

2

I'd like to thank @David (see comments above) for helping me answer my own question. The issue was a file permission issue. I had just added the Glyphicons folder to my localhost application folder (i.e., /html) and it didn't have the right permissions. Simply typing the following in the command line solved the problem:

html TimPeterson$ chmod -R 777 assets/glyphicons/   /*this command allows access to all (777) for all files and folders (-R) within the glyphicons folder*/

So it wasn't CSS, mime-types, or anything else to do with Nginx as I had originally thought.

tim peterson
  • 23,653
  • 59
  • 177
  • 299