Twitter Bootstrap Question posted in

open iconic bootsrap not working-Twitter bootstrap

I am trying to integrate open iconic with bootstrap.
Icons were not visible when I am using in my web app.

Then I created a simple html with just bootstrap and openiconic links.
Still it doesn’t work, the same setup was working on other system( as far as I remember :)).
Please point me if I am doing anything wrong here.

I tested on windows 7, chorme and FF. Below is the html

    <!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

Top left corner icon not loading

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is unusual, but both the latest browsers give problem at same time, so its hard to say if its browser problem. But, Yes it is a browser issue, I downgraded firefox to 58.0.2 (64-bit) after banging head for total 5 hours :( and icons are showing up now. I am not sure about chrome, as of now working with above FF version, good luck :)

    screenshot


  2. 0

    You code looks like it is working correctly: https://jsfiddle.net/h983kguj/

    Try to run this html under a webserver.

    Based on the comments below, if resetting / reinstalling the browser doesn’t fix this, try also other browsers, if the problem persists on all browsers it might be a problem with your fonts under Windows, especially if you tried to install that custom font locally in your Windows.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search