The Bootstrap icon is not displaying

Having some trouble animating the refresh icon on my jsp page. The icon is not showing up, despite my markup:

<a id="update" href="#"><i class="icon icon-refresh"></i></a>

I've included all necessary bootstrap links:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

If anyone has any advice, please let me know. Thank you.

jquerycsstwitter-bootstrap

Answer №1

In the transition from version 2.0 to 3.0, the naming convention for Bootstrap icons was updated.

Kindly update

<i class="icon icon-refresh"></i>

to

<i class="glyphicon glyphicon-refresh"></i>

To access the documentation for glyphicons in Bootstrap 3.0, visit: http://getbootstrap.com/components/#glyphicons-glyphs

Answer №2

The icon classes have been updated

<a id="update" href="#"><i class="glyphicon glyphicon-refresh"></i></a>

Check out the demonstration: Fiddle

Please note: If you are using bootstrap.js, ensure that jQuery is included before the bootstrap.js file.

Answer №3

Give this a shot, it's currently working for me

<html>
<head>
    <title></title>
<!-- Latest compressed and optimized CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Selective theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Most recent condensed and improved JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>
<body>
    <i class="glyphicon glyphicon-refresh"></i>
</body>
</html>

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

Implementing AJAX to Invoke JavaScript Function in Code-Behind

Currently, I am considering developing an asp.net user control to manage various modal popups such as error handling, forms, and dialogs. In a previous project, I placed the user control in the top master page so it could be accessed by all content pages. ...

jqueryasp.netajaxuser-controls

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I ...

javascriptcsscanvascss-transitions

Send formcollection to action without submitting the form

Is there a way to pass formcollection data to FileContentPath actions that return generated pdf/excel files in the controller? The problem is that the formcollection may change depending on the user's interactions with the page. For example, I have l ...

jqueryasp.net-mvc

Tips for automatically scrolling to the bottom of a page and focusing on an iframe

My website features a large banner image with content followed by an embedded YouTube video within an iframe. While the webpage is responsive, on mobile devices the header appears too big and users have to scroll down to see the video. I want the webpage ...

htmlcssiframe

CSS tip: Display only the latest x entries on a list

Can CSS be used to display only the most recent x items in a list? The code below reveals every item except the first two. How can I make it so that only the last two items are displayed in the list? ul li { display: none !important; } ul li:nth-las ...

htmlcss

What is the most common method for creating a dropdown menu for a website's navigation?

Is there a common approach to creating an interactive drop-down navigation menu in the industry? I have searched on Google and found multiple methods, but as a student working on my first big web project, I am hoping to find a standard practice. I don&apo ...

javascripthtmlcssdrop-down-menustandards

Using jQuery to calculate the total sum of all data that is associated with a particular date

After retrieving data from an API, I process it in the following manner: if (jsontext == '[]') { return false } else { var newTr = ''; for (var i = 0; i < json.length; i++) { newTr += (' / ' + json[i]. ...

jqueryjsonsum

The presence of CSS rollovers on a scrollable div is causing overflow problems

Currently, I am developing an interface that involves a list of items inside a scrollable div. Some of these items have rollover menus that extend beyond the boundaries of the div when hovered over. It is crucial for the website to be compatible with disab ...

csshtmloverflowrollover

How to cover the entire screen with a modal window?

<a href="#dialog" name="modal">Simple Modal Window</a> <div id="boxes"> this content should appear below the modal <!-- #customize your modal window here --> <div id="dialog" class="window"> <b>Tes ...

javascriptjqueryhtmlcss

Switching Angular Buttons

I am developing an Angular application with a Bootstrap theme that includes 2 radio buttons, each triggering a separate page. It is important that only one radio button can be selected at a time. I want the class values to be btn btn-primary active for the ...

javascripthtmlangularjstwitter-bootstrap

What unit is typically used as the default measurement for margin-left?

When it comes to CSS, the default value for margin-left is 0. It's interesting that no units are needed when the value is 0 since it doesn't matter if it's in em or px. However, I recently came across some code at my company that specifies: ...

css

Having trouble removing or adding a class to an HTML element?

I have a collection of three colored buttons. My goal is to allow users to select one button at a time, triggering it to be highlighted while the others are unselected. Each button corresponds to an object with a property called isSelected that can be set ...

javascripthtmlcss

Utilizing Jquery to add active class to navigation links on non-webpage elements within the context of .Net with

In my current project, I am focusing on customizing the header component of a .net cart called AbleCommerce. The specific requirement is to have an active link effect applied only within the header. While I have successfully implemented a script that works ...

jqueryasp.netnavigationablecommerce

Would it be expected for these two JQuery functions to exhibit identical behaviors?

If I have the following two JQuery functions - The first one is functional: $("#myLink_931").click(function () { $(".931").toggle(); }); The second one, however, does not work as expected: $("#myLink_931").click(function () { var class_name = $(thi ...

javascriptjquery

Struggling to interpret JSON using JavaScript and Ajax

I have a PHP script that generates a .json file: <?php $data=array( "Name"=>"John", "Surname" => "Doe"); $jsontext = "["; foreach($data as $key => $value) { $jsontext .= "{objectValue: '".addslashes($key)."', textObject: &apo ...

javascriptphpjqueryajaxjson

What could be causing the value to be zero once the AJAX call in asp.net MVC 3 and jQuery is complete?

Below is my AJAX request: var totalCost = 0; function GetTotalCost(start, end, rID) { $.ajax({ url: '@Url.Action("CalculateTotalcost")', type: 'POST', data: JSON.stringify({ start: ...

c#jqueryajaxasp.net-mvc-3

`How to show several div elements with a single click using Angular.js`

My code snippet is structured as follows: <div ng-controller="ClientCtrl"> <div ng-show="shows">hello</div> <div ng-show="show">world</div> <button ng-click="show=!show">click</button> ...

javascripthtmlcssangularjs

Effortlessly implement CSS styling in a scoped shadow element with Vue3

I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code: <template> <custom-button> #shadow-root (open) <a href="#"></a> <other-custom></other-c ...

cssvue.jsvuejs3shadow-domscoped

Choosing items within a category

For quite some time now, a question has been bothering me. I've been delving deeper into CSS lately and have made the decision to avoid using jQuery in this Drupal project to stay clear of custom code. The issue arises with a class that is applied to ...

csscss-selectors

Arranging one box alongside the others using the Bootstrap grid system

I'm trying to use Bootstrap 4 to layout my columns in a way that one column will be aligned with the others on wide screens, but fall below the other columns on mobile devices. However, I want the aligned column to be in the second position instead of ...

twitter-bootstraptwitter-bootstrap-4bootstrap-4