Are you experiencing empty boxes instead of Glyphicons in Bootstrap 3?

Having some trouble using Glyphicons with Bootstrap 3. I've noticed that a few of them aren't displaying properly.

For instance, when trying to use these three glyphicons, the first one doesn't seem to show up correctly (appears as an empty box):

<i class="glyphicon glyphicon-bell"></i>
<i class="glyphicon glyphicon-cog"></i>
<i class="glyphicon glyphicon-ban-circle"></i>

Live demo can be found here: http://jsfiddle.net/WE6BS/

I've included the CDN versions of Bootstrap JS, CSS, and Glyphicons, and also copied the code directly from the example page for Glyphicons. Any idea where I might be going wrong?

csstwitter-bootstraptwitter-bootstrap-3glyphicons

Answer №1

It appears that there may be an issue with the integration of Glyphicons on the BootstrapCDN 3.0.0 release. Initially, when version 3.0 was launched, the glyphicons were housed in a separate repository, and were later merged back into the main Bootstrap codebase around version 3.0.1.

Fortunately, the latest version 3.0.3 seems to be functioning correctly: http://jsfiddle.net/EhwT3/

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

Tips for enhancing webpage load times by optimizing CSS and jQuery file handling

As a beginner in HTML and CSS, I am facing slow loading times when testing my pages on a local server. This makes me concerned about the potential loading time on the internet. Currently, I have all the files included in the <head> tag at the top of ...

jqueryhtmlcss

Steps to insert a new row for a grid item using material-ui

When it comes to breaking a line of grid item like this, the image shown below illustrates how the rest space of the grid should be empty. https://i.stack.imgur.com/pvSwo.png <Grid container spacing={3} <Grid item xs={12}> "Grid Item xs ...

cssreactjsflexboxmaterial-uicss-grid

How can I stack one column beneath two columns in a unique format?

I am looking to create a layout similar to the one depicted below. https://i.sstatic.net/m1aCj.png The window is represented by the red box, and the black boxes represent the <div> elements. I have attempted to arrange the image into two columns, bu ...

htmltwitter-bootstrapbootstrap-4

What is the method for altering the look of a button using JavaScript?

As a beginner in web development, I have a question. Typically, I know how to style the submit button when it's created in the HTML page using CSS. However, I'm wondering if it's possible to apply CSS styling to the JavaScript block instead. ...

javascriptjqueryhtmlcss

Arrange list items dynamically using ajax

I am attempting to adjust the positioning of the scrollable list item depending on whether a message was sent by a user or another party. However, my current method is not yielding the desired results. I have experimented with adding .css('position&a ...

javascriptjqueryhtmlcssajax

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...

javascriptjqueryhtmlcss

Design the title attribute for the style area tag

Currently, I have set up an image with various clickable areas on it, and I want to display a description when the user hovers over these areas. My current solution involves adding the descriptions as titles, but I feel like there might be a better way to ...

htmlcss

When the getImageData event is triggered upon loading

Hello, I have a script that identifies transparent and non-transparent pixels. Currently, the result is displayed from a 100px by 100px rectangle on mouseover: var data = ctx.getImageData(100,100, canvas.width, canvas.height).data; During mouseover, it s ...

javascripthtmlcssoopecmascript-5

Reposition various div elements within a static container

Struggling to align div boxes like the image below was exhausting: I attempted fixing it with the code provided in this JSBIN link. How can I resolve the issue and adjust the layout as desired? Any help would be greatly appreciated. Thank you in advance ...

csshtmllayout

How do I center an SVG vertically inside a button using Bootstrap 5?

Is there a way to center the SVG vertically within the button while using Bootstrap for styling? <a href="#home" class="navbar-home"> <button type="button" class="btn btn-outline-warning"> & ...

htmlcssbootstrap-5

What are the common jQuery functions used to toggle both display and visibility simultaneously?

After incorporating the default Bootstrap theme into my mobile site, I discovered that jQuery is struggling with a seemingly simple task: displaying elements marked with the hidden class. It's hard to believe, but it's true. The tricky and troub ...

jquerytwitter-bootstrap

Steps to implement an image zoom function triggered by a button click

I'm working on a school project that requires me to use only html, css, and javascript for creating a website. Currently, I'm designing a landing page with a button that will navigate the user to another page. My goal is to have the background im ...

javascripthtmlcss

"Text data will be automatically cut at the end of a page and continue

I encountered the following issue As depicted in the image The data is not being displayed properly In the next td, the last character 3 is also printed on the next line Is it possible to avoid page footer and header without adjusting the page margin? ...

jqueryhtmlcss

Creating CSS boxes in a dual column layout with a step-by-step approach

Currently, I am in the process of developing a user interface for a menu that looks something like this: I am exploring different implementation methods for this design. In this project, I am utilizing Bootstrap framework. The main container is a containe ...

angularjscsstwitter-bootstrap-3sass

Instructions for changing the background color of a value

I'm working with a code that populates values in table columns, but the text displays in black color. I would like to highlight the text with a blue background. Here is the HTML code snippet: <body> <div class="container"> ...

htmlcssservicenow

recognizing a specific attribute of a website

Apologies for the unclear heading. I am on the lookout for a specific feature that has become a common sight on numerous websites lately. It's an animation used by freelancers when showcasing "projects worked on" or "hours spent coding". A counter s ...

htmlcss

Unveiling the Technique: Adjusting Field Visibility When Dropdown is Altered

I tried to find a solution on Stackoverflow for displaying/hiding a field based on dropdown selection using either jQuery or inline JavaScript. However, I am facing difficulties when implementing this within a table. Let's start with an easy approach ...

javascriptjqueryhtmlcss

Is it possible to operate a mobile site automatically alongside a desktop site?

I'm currently working on a website that looks fantastic on desktop, but doesn't quite function properly when viewed on mobile devices. I'm curious if there is a method or system I could implement to automatically load the mobile version of t ...

htmlcssresponsive-design

Automatically conceal a div once an iframe reaches a specific height

When a user schedules an appointment on our website, it triggers a change in the height of an iframe. I want to automatically hide the section above the iframe once the iframe's height has changed. Currently, I have implemented the following code whic ...

javascriptjqueryhtmlcssiframe

Ways to limit the width of content

While I could use a div container to solve this issue, I'm exploring the possibility of achieving it without one. My goal is to create a layout that is flexible between 640px and 1280px, but remains fixed beyond that range. The colored div I have cur ...

htmlcss