The issue with open iconic bootsrap not functioning properly

I tried to combine open iconic with bootstrap, but the icons were not showing up on my web app.

Even when I created a simple HTML file with just bootstrap and openiconic links, it still did not work. I remember this setup working on a different system. Please let me know if I am making any mistakes.

I tested it on Windows 7, Chrome, and Firefox. Below is the HTML code:

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-slim.min.js"></script>
<script type="text/javascript" src="bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha256-m/h/cUDAhf6/iBRixTbuc8+Rg2cIETQtPcH9D3p2Kg0=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />

</head>
<body>
<div class="container-fluid">
<span class="oi oi-pie-chart"></span>
<div class="row mt-12">
    <a class="btn btn-primary"><span class="oi oi-dashboard">Hello</span></a>

    <span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
</div> 
</div>
</body>
</html>

Screenshot

https://i.sstatic.net/hRMD8.png

htmlcssbootstrap-4glyphicons

Answer №1

It's quite peculiar that both of the latest browsers are posing the same problem simultaneously, making it difficult to pinpoint if it's a browser-related issue. However, I managed to resolve the problem by downgrading Firefox to version 58.0.2 (64-bit) after struggling for a total of 5 hours :( Now, the icons are displaying properly. I can't confirm if the same solution works for Chrome, but for now, I suggest using the mentioned Firefox version. Best of luck!

https://i.sstatic.net/Ou1yn.png

Answer №2

It seems like your code is functioning correctly! Check it out here.

Make sure to test this code on a webserver.

If you're still experiencing issues after resetting or reinstalling your browser, try testing it on different browsers. If the problem persists across all browsers, it could be related to your fonts in Windows, especially if you've attempted to install a custom font on your system.

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

Verify a different element depending on a selected input

Can anyone provide a jQuery code for validating the following HTML structure (view it on Jsbin)? HTML: <p id="options"> <strong>Options:</strong> <span> <input type="checkbox" name="ids" value="101" id="opcao-0"> <lab ...

jqueryhtmlvalidation

The CSS code isn't functioning properly on both desktop and mobile views

Here is what I desire to achieve: https://i.sstatic.net/8H4fv.png The CSS code I have is: And the HTML code looks like this: <body> <div class="contanier"> <div id="rightcol">Right Section</div> <div id="content">Cont ...

htmlcssiphone

Issue "The only acceptable numeric escape in strict mode is '' for styled elements in Material-UI (MUI)"

Attempting to utilize the numeric quote for quotation marks, I encountered an issue: 'The sole legitimate numeric escape in strict mode is '\0` The snippet of code causing the problem can be seen below: export const Title = styled(Typogra ...

javascriptcssreactjsmaterial-ui

Combine the content from multiple text areas and submit it to another text area

****UPDATE**** Thanks to @JasonB, I was able to resolve the previous issue mentioned. Now, I have three additional textareas on the same form that should only appear when their respective checkboxes are clicked. How can I integrate this into my current sc ...

javascriptjqueryhtmlcss

What steps should be taken to transform a transposed table into one that can be scrolled horizontally?

In the process of creating a comparison table for products, I have designed a table with vertical rows. The header is positioned on the left side, with two or more product descriptions displayed in vertical rows within the table body. To accommodate a scen ...

htmlcsshtml-tablehorizontal-scrolling

React is producing a collection of <td>'s

My React code is very straightforward and it runs smoothly: function Columns(){ return ( <React.Fragment> <li>Hello</li> <li>World</li> </React.Fragment> ); } function Example(){ ...

javascripthtmlreactjs

How can I make the footer on my webpage have a white background?

My goal is to create a white div that spans from point (A) to point (B) on the page, just like in the image. I aim for it to stretch all the way down to cover the entire browser without showing any gray background underneath, even when the page is scrolled ...

javascriptjqueryhtmlcss

Maintaining Proper Header Dimensions

Having some issues with aligning my fixed widget and floating navigation. The fixed widget is not respecting the height of the floating navigation and is appearing at the top when in its fixed position. I'm currently using "Q2W3 Fixed Widget" for the ...

csscss-float

Increasing Taxes and Boosting the Overall Cost

How can we set up a system where taxes are bypassed by default unless otherwise specified when placing an order? Let's take a look at the following text box: <input class="txt1" type="text" name="subtotal" value="" id="subtotal" size="16" ta ...

javascriptjqueryhtml

What is the best way to apply margins to a nested div element in relation to its parent div element using CSS?

My Coding Dilemma: #b { width: 700px; height: 150px; margin-top: 10%; margin-left: 20%; text-align: center; border: 2px solid black; } .block { width : 10%; height : 10%; border: 2px solid black; padding: 40px 40px; margin: inheri ...

javascripthtmlcss

Words fail to display

.sport { content: url("../img/sport.png"); background-color: rgba(0,0,0,1.0); top: 61px; height: 310px; width: 300px; position: absolute; margin: 0; left: 0; border-radius: 4px; overflow: hidden; } .sportsandactivis { background-colo ...

htmlcss

Activating/Deactivating a button with just a press

In my SQL data display, each row has an "Add To Zip" button that is initially enabled. I want to disable the button in the current row when it's clicked and later re-enable them using a different PHP file. What's the best way to achieve this with ...

phphtmlajax

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

BeautifulSoup: Discovering all hyperlinks within a specified div class

Currently, I am in the process of gathering all href's from a div with the class 'server-name' on disboard.org/. Source-Code: def gather_links(): url = 'https://disboard.org/search?keyword=hacking' response = requests.get ...

pythonhtmlbeautifulsoup

Using JavaScript to switch the classes of buttons and elements

Hey there! I received this code from a friend who was trying to modify the switch buttons. I made some changes so that each button can now change the state of two separate elements when pressed. Here's the altered code: function toggleClass(ev){ v ...

javascriptcss

Blank space on the lower portion of my website as I attempt to implement a responsive layout

Working on making my webpage responsive for iPad and mobile devices. While adjusting the media query, I noticed a white area at the bottom of the page that seems to be outside the body element. Unsure of where it's coming from. Any help would be great ...

htmlcssresponsive-design

Table cell smaller than div

I want to maintain the size of a table cell while having a larger div float over it. Is there a way to manipulate CSS and elements to achieve this without resizing the table cell? ...

javascriptcsshtml-tablecss-tables

Position the scroll down arrow at the center bottom of a full-screen div using WPBakery Visual Composer

I have a series of full-screen sections in Visual Composer and I am trying to add an arrow at the bottom of each one to indicate to users that they should scroll for more content. However, my attempts with absolute positioning on the divs containing the ic ...

csswordpressvisual-composerwpbakery

best practices for choosing items from a dropdown menu using Angular

I have a dropdown list displaying existing tags/chips created by users in the past. However, I'm having an issue where when I select a tag from the dropdown list, it doesn't show up in my input field (similar to the Chart tag currently). I am abl ...

htmlangulartypescriptangular-material

Header that sticks to the top of a container as you scroll through it

Many questions arise regarding sticky elements in the DOM and the various libraries available to handle them, such as jquery.pin, sticky-kit, and more. However, the issue with most of these libraries is that they only function when the entire body is scro ...

jqueryhtmlcsssticky