Search code examples
cssbootstrap-4font-facecdnglyphicons

Why are all font-faces (i.e., glyphicon icons) loaded properly if I ONLY use Boostrap's online CDN source file?

The following Plunker code (https://embed.plnkr.co/KpVqaiblOKGk5K6VWmi4/) works perfectly if I copy and paste everything into Microsoft Visual Studio Code. Once I use the Bootstrap source file offline (i.e., set my link's href to a file location instead of an online URL), the following error message pops up and none of the icons show up:

CSS3119: No fonts available for @font-face rule bootstrap.css (266,5) output without bootstrap icons

Here's an image of my source file directory, how I want my output to look like, and my HTML code (the JA code is directly copied and pasted from the Plunker link): source file directory listing correct output with bootstrap icons

    <head>
    <link rel="stylesheet" href="library/bootstrap.css" />
        <!--    THIS CODE LOADS GLYPHICONS ICONS PROPERLY <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />  -->
    <link rel="stylesheet" href="library/angular-dropdownMultiselect.min.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script src="library/angular.min.js"></script>
    <script src="library/angular-dropdownMultiselect.min.js"></script>
    <script src="script.js"></script>
    </head>

  <body>
    <div ng-app="App">
      <div ng-controller="MyController">
        <div style="margin-top: 25px;">
          <dropdown-multiselect dropdown-config="config" model="selectedItems"></dropdown-multiselect>
        </div>
        <br>
        <pre> Selected Items = {{selectedItems | json}} </pre>
      </div>
    </div>
  </body>
Solution

  • 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. Example for your css file:

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