CODEWITHSUNDEEP
twitter-bootstrapfrontendglyphiconsweb-frontend
akigureum
akigureum

Reputation: 5

Glyphicon bootstrap doesn't work probably

I'm working on bootstrap framework and have issue about glyphicon. I'm using bootstrap v3.3.6, and in HTML, I have this glyphicon

<span class="glyphicon glyphicon-menu-right" aria-hidden="false"></span>

But it doesn't show the icon. I think it causes because of the version in bootstrap. So I try to put this line to project

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

The icon will be shown but all the style in project will be override, too. All be broken...:(

Does anyone have experience about this issue? Please give me some advices. Thanks.

Upvotes: 0

Views: 1104

Answers (1)

user869375
user869375

Reputation: 2419

It works if we use minimal html code like:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <title>Test</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <span class="glyphicon glyphicon-menu-right" aria-hidden="false"></span>
</body>

You can get the fiddle here: https://jsfiddle.net/0orbqw9L/

I think your problem maybe some of your inline/application styles conflicting with the bootstrap styles. Usually the best way to work with bootstrap is to include bootstrap.css first and then your application css file.

If you still dont want to tinker with your existing styles, you can probably add specific styles in your application css file which overrides your bootstrap styles or earlier defined application styles like:

.tag {
  font-family: Arial !important; //see the !important which helps you override styles
}

Upvotes: 1

Related Questions