Icon font (@font-face) not rendering on localhost

问题

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:

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;
 }

回答1:

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.

来源：https://stackoverflow.com/questions/13886817/icon-font-font-face-not-rendering-on-localhost

标签

css

permissions

nginx

icons

font-face