1

I've read quite a few threads at SO on this issue. But none covers my situation. My bootstrap glyphicons show up as a vertical rectangle on production only. They show up fine on dev and staging servers.

Exact same copy of files.

This is my HTML (razor view) for the glyphicons in question:

<button class="btn btn-default" id="btn-cancel"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Cancel</button>

Web server is IIS7 on both staging and production.

Actually in IE11, the glyicons don't show at all. See the picture for how it looks like in Chrome and FireFox:

enter image description here

enter image description here

enter image description here

Manatax
  • 4,083
  • 5
  • 30
  • 40
Stack0verflow
  • 1,148
  • 4
  • 18
  • 42
  • Dumb question, but have you tried to clear your cache? or open with a different browser? – Manatax Aug 17 '15 at 19:30
  • Tried the latest IE, FF & Chrome. Same behavior. – Stack0verflow Aug 17 '15 at 19:30
  • wait... all your glyphicons show as a vertical rectangle? – Manatax Aug 17 '15 at 19:35
  • 1
    Check if your server delivers the custom font resource correctly – does it load at all (not a 404/500), and how do the response headers compare? – CBroe Aug 17 '15 at 19:35
  • @CBroe: Yes, like Coding Enthusiast suggested. I checked the console and found out there is an access issue. 401 error. See my update. Thanks. 1 point up. – Stack0verflow Aug 17 '15 at 19:47
  • If the "update" fixed your issue, I suggest that you submit it as an answer here and mark it as accepted. Filling the Question with "update: solution" defeats the purpose of a Q&A in my opinion. You can still upvote answers you deemed helpful, so they get some rep out of it. (Since undoing the accepted answer undoes the rep rewarded to them) I would suggest your answer being as thorough as possible, just in case the link breaks one day – onebree Aug 18 '15 at 13:08
  • Maybe "Answer Your Question"? – Stack0verflow Aug 18 '15 at 13:15

4 Answers4

2

You glyphicon show up as square because it fails to load the fonts. Make sure there are no restrictions on the fonts folder. These are the reasons I can think of that might help fix it:

  • Font Folder missing on your deployment servers. Fix: check your bootstrap/web files and make sure you copy everything well and that the font folder exist with fonts in it.

Font folder is wrongly placed. The font folder is always one folder up the bootstrap.css file. Make sure your fonts and the folder containing your css are like this: 

 bootstrap/
 ├── css/
 │   ├── bootstrap.css
 ├── js/
 │   └── bootstrap.min.js
 └── fonts/
    |__ glyphicons-halflings-regular.eot

Debugging: check your browser console if there is any "fail to load resources" error

  • Check file after after if you still can't figure it out. There is surely a missing file somewhere or a file that can't be loaded.
  • IE has some restrictions when it comes to fonts: check more here
Community
  • 1
  • 1
Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
  • Yes, that has to be the problem. See my updates. So, there is an access issue on production server only. Gotta fix that. Thanks. – Stack0verflow Aug 17 '15 at 19:45
2

I had the same issue and found that once I linked this to the html head it worked fine. I hope this solves it for you too. <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Abdullah Naim
  • 29
  • 4
  • 1
    Please edit your answer to move the important comment you made inside the anwser. Don't forget to use [format the code](https://stackoverflow.com/editing-help) to make it easily readable. – SystemGlitch Jul 14 '18 at 20:17
0

Make sure the fonts folder with the 5 files are located in the base public folder.

Manatax
  • 4,083
  • 5
  • 30
  • 40
0

The answer provided at http://forums.iis.net/t/1179660.aspx fixed the issue. I am pasting it below just in case the link breaks:

...[C]heck if IUSR have (sic) access to the website. Please take the following steps:

  1. Open IIS Manager, expand sites node and select your site.
  2. Click "Edit Permissions.." in the right actions pane.
  3. Switch to security tab, add IUSR for read permission if the permission is not granted for the user.

You can check the following article for more information about the built-in accounts in IIS7:

Understanding Built-In User and Group Accounts in IIS 7 http://learn.iis.net/page.aspx/140/understanding-built-in-user-and-group-accounts-in-iis-7/

Stack0verflow
  • 1,148
  • 4
  • 18
  • 42