What is causing all font-faces (such as glyphicon icons) to load correctly only when utilizing Bootstrap's online CDN source file?

I recently encountered an issue with my Plunker code (https://embed.plnkr.co/KpVqaiblOKGk5K6VWmi4/), where everything worked perfectly in Microsoft Visual Studio Code. However, when I tried to use the Bootstrap source file offline by setting the link's href to a local file instead of an online URL, I started getting this error message and none of the icons were loading:

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

To give you a better understanding, here are images showing my source file directory listing, how I want my output to look like, and also my HTML code (I directly copied and pasted the JA code 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>

Answer №1

In order to properly obtain Bootstrap, it is essential to download it from the official source link. This official download includes a directory named /fonts/ which houses the necessary glyphicon font files. Here is an example snippet for your css file:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Centering content within a Bootstrap 4 card deck: tips and tricks

On my Bootstrap 4 page, I'm working with a deck of cards and want to align the buttons for a better appearance. How can this be achieved? Check out the image below: https://i.sstatic.net/XkfqJ.png You can also view the demo here: The table doesn&ap ...

Inline styles are effective, but external stylesheets are not functioning properly (see JsFiddle for reference)

http://jsfiddle.net/xw0vvo9e/4/ Trying to specify a background color for the navBar. In the provided jsfiddle, the CSS includes: div .navBar { width: 100%; height: 45px; background-color: #FF0000; top: 0px; position: fixed; } However, the background ...

Rails application encounters issue where CKEditor is removing style elements from span classes

In my current setup using Rails 4.1.4, Ruby 2.1.2, and CKEditor 4.1.1 integrated with Rails Admin, I am facing an issue. Whenever I enter text in the CKEditor text area and apply a font or font size, it saves successfully. However, upon viewing the content ...

What is the step-by-step process for executing the following functions: 1. magnify -> 2. spin 360 degrees -> 3. restore to original size before magnification -> 4. switch colors on and

Can you show me a demo featuring the following functions in order: 1. enlarge -> 2. rotate 360 degrees -> 3. resize to original size -> 4. change color (toggle) $(document).ready(function() { $('.tlist td div').click(function() { ...

What is the best way to apply a background color to text seamlessly? (Using HTML5 and CSS3)

<!-- 6장 연습문제 4 --> <html lang = "ko"> <head> <meta charset = "UTF-8"> <style> img{margin-left: auto; margin-right: auto; display: block;} .hyper{ text-decoration-line: ...

Reversing animation in styled components when a prop is set to false

One interesting challenge I encountered recently was passing an open prop to a styled component in order to implement animations for a hamburger icon. Here is the code I used: const StyledBurger = styled.button` display: flex; flex-direction: column; ...

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

I'm currently dealing with an issue regarding my accordion design. I have customized the stylesheet using themeroller, but when I collapse one of the sections, the header changes to black instead of reverting back to its original red color. I've ...

How to easily remove margin in a Bootstrap alert component

I'm having difficulty removing margins within a bootstrap alert component and I can't figure out why! https://codepen.io/weellydooh/pen/MWKKoqg <div class="alert alert-primary" role="alert"> <p>A simple primary alert—check it ...

The click functionality is not functioning properly within the .each() loop

For my event handler, I am trying to use click() but it doesn't seem to be working. Here is the code snippet: $('.ajax-close').click(function( event ){ event.preventDefault(); alert('hi'); $( ' ...

Ways to create a sequential appearance of elements through CSS animations

Can you help me achieve a wave effect for elements appearing one by one using CSS animation (jQuery)? Currently, all the elements show up at once and I want to create a wave-like motion. Any assistance would be greatly appreciated. $(window ...

Achieving a similar behavior to a Node.TEXT_NODE with Node.ELEMENT_NODE in the context of flex-direction: column CSS

Below, you'll notice that the div._b5a is set as a flex container with flex-direction: column. Typically, its child is just a text sentence (nodeType == Node.TEXT_NODE): 新增個人簡介,讓大家更瞭解你, which means the text sentence remains ...

Element within container div being forced out of view (off-screen)

I'm in the process of developing a responsive website and my goal is to keep all my divs centered at all times. However, I've encountered an issue where using the flex attribute in my container causes the bootstrap cards to go offscreen. Can any ...

Utilize JQuery addClass to implement CSS animations that run only once by setting a boolean variable to true or

I am working on a CSS animation that I want to trigger when the page is visible in the browser. To achieve this, I am using a function that determines the position (referred to as "posish"). The animation should run once when the page comes into view or wh ...

The current height of the div is not meeting the desired specifications outlined in

I am encountering some issues with nested 'div' elements. Within a parent div, I have two child 'div's. <div class="case-study-video-container"> <div class="video-holder"> <?php putRevSlider( '' ); ?> ...

Creating text using the Bootstrap grid system

I am currently using Bootstrap and have set up a grid with a circle on the left side. I am now facing an issue where any text I try to add next to the circle overlaps with it. I need the text to not overlap with the circle and vice versa, while also being ...

Is it possible to accomplish this straightforward task using PHP?

Essentially, my goal is to have the content inside the h1 tag duplicated in the h2 tag as well. Take a look at the example provided below. <!DOCTYPE html> <html> <body> <h1>The content here should also appear in the H2 tag.</h1 ...

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Need help styling a login/signup component in Vue.js where flipping between the two cards isn't working smoothly. The transition is causing one card to move down and right while the other comes in from the bottom right. It's hard to explain the i ...

How can I delete the header and footer on a personalized homepage design?

After crafting a unique home page/landing page for my website that stands out from the rest, I've come across an issue. The header and footer are appearing on this new page, but I only want to display what I specifically coded. I attempted using Site ...

Unable to make a div grow within a Popper component in a React.js application

I'm facing a challenge with implementing a CSS feature and need some assistance. https://i.stack.imgur.com/KXpGd.png Upon clicking the "See link options" button, the content loads but spills out of the popper. My goal is to have the popper expand in ...

Dropdown menu is not positioning correctly over other elements on the webpage

After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...