I am using Bootstrap v3.3.x along with its glyphicons. For some reason, on remote server, not locally, the folder with fonts cannot be found and therefore glyphicons are not loaded. In chrome debugger it says:
x GET http://the IP/web app folder/Content/fonts/glyphicons-halflings-regular.woff .............................................. /web app folder/Content/fonts/glyphicons-halflings-regular.woff:1
indicating the error because the file cannot be found.
I checked the following:
both bootstrap and bootstrap-theme style sheets are included
folder
fonts
is at the same level as foldercss
:~/Content/css/bootstrap.min.css
,~/Content/css/bootstrap-theme.min.css
, and~/Content/fonts/
I have added required
mimeMap
entries toweb.config
<staticContent>
<remove fileExtension=".eot" />
<remove fileExtension=".ttf" />
<remove fileExtension=".otf" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<mimeMap fileExtension=".otf" mimeType="image/svg+xml" />
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
</staticContent>
I also checked that everything works if I load the whole bootstrap library from remote locations:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
The problem is that I downloaded library with customized components and has to refer to library on the server.
Cheers