Bootstrap Icons Are Loaded Locally But Not When Online

Bootstrap icons are loaded locally but not when online

We recently had similar issue (though we were using metroUI - http://metroui.org.ua/). Essentially it turned out we were bundling the css files and because of that when we deployed the application in Windows Azure, none of the fonts were loaded.

In our case, we had the following directory structure:

Sample Image

and modern.css was referencing fonts like

../fonts/iconFont.eot

and we were bundling the css file like this:

bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/css/modern.css",
                "~/Content/css/modern-responsive.css"));

Because of bundling, the application was looking for fonts in /fonts directory at the application root which was obviously not there.

Long story short, we ended up changing the bundle name:

bundles.Add(new StyleBundle("~/Content/css/metroUI").Include(
                "~/Content/css/modern.css",
                "~/Content/css/modern-responsive.css"));

Once the bundle name was changed, things started working properly.

Font awesome working in local but not on site

This is a problem with the MIME types being reported by your server for the fonts. You need to ensure that Apache / IIS / whatever reports the correct filetype for the font files to be used in your browser. FontAwesome list what the server MIME type headers should be here.

However, as you say you can not alter the configuration, I suggest using a CDN for displaying the icons.

For example, the Getting Started page suggests using Bootstrap CDN. Change the reference in your <head> element to:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

And the icons will show up.

The icon from Bootstrap css file not loaded when offline

Place all the contents of bootstrap package in the folder including fonts provided by bootstrap

bootstrap folder structure is like

    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap.min.css.map
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css
    │   └── bootstrap-theme.min.css.map
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

you have not included the Font folder. Just Download the whole whole bootstrap package from there official site and keep the folder structure same and then include the css file as

<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>

Font icon show on localhost but when uploading on online it is not showing

Actually we uploaded font file through FTP It's not corrected uploaded; so
Sometimes is the FTP client that corrupt the file. So we font file uploaded to the cpanel through.

And we get the solution.

Thank you for your helpful response

Why font-awesome works on localhost but not on web ?

I've just loaded your webpage and checked the net tab of firebug.

your following urls returned a 404:

http://www.senocakonline.com/Content/font/fontawesome-webfont.woff

http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf

i would assume that those being missing is the reason your icons aren't displaying.

UPDATE: 23.10.2015
to make it available just add this code to your WebConfig:

<system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Bootstrap Glyphicons not rendering using local Bootstrap version

It isn't working because you saved the CSS file from the CDN link. That won't work, because the glyphicons are linked to relative to that CSS file. Example:

@font-face{
    font-family:'Glyphicons Halflings';
    src:url(../fonts/glyphicons-halflings-regular.eot);
}

What this means, is that the downloaded Bootstrap file is looking for the glyphicons in a folder on your computer (which you don't have).

You need to properly download Bootstrap from the official download link. This official download contains a /fonts/ directory that contains the actual glyphicon font files.

Alternatively, you could change all of the font paths in the CDN file to be absolute links to the fonts on the CDN...but that doesn't really make sense.

Font Awesome icons are not working, I have included all required files

Under your reference, you have this:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Specifically, the href= part.

However, under your full html is this:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Have you tried replacing src= with href= in your full html to become this?

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Works for me: http://codepen.io/TheNathanG/pen/xbyFg

Font-Awesome css not working locally

What you have to do when you use bootstrap/font-awesome files locally is:

Path stored must be clear.
Path written inside the font-awesome.min.css should equal to (1)
Version must have the same.
the fonts in folder fonts/ are indeed related to font-awesome.min.css you've got right now.
you must know how to write it on your script, as in; <span class="fa fa-home"></span>, etc.

Bootstrap Icons Are Loaded Locally But Not When Online