CODEWITHSUNDEEP
twitter-bootstrap
Daniel Faria
Daniel Faria

Reputation: 1484

Twitter Bootstrap 3 icon displaying a square

Font files are in the right place and html code is with charset utf-8.

Thats the code:

<!DOCTYPE html>
<html>
<head>
    <meta chaset="utf-8">
    <title>Teste icone</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>

    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-star"></span> Star
    </button>

</body>
</html>

and thats the file structure:

-css
   *bootstrap.min.css
-fonts
    *all font files here
*index.html

The strange is that when i look on debug all font files are loaded correctly

Upvotes: 34

Views: 31376

Answers (12)

Mike6679
Mike6679

Reputation: 6117

My fonts folder was simply in the wrong directory, it had to go one level up.

Upvotes: 0

sajad
sajad

Reputation: 1

I Have this problem and After very search :

  1. glyph-icons is free just for use CDN.
  2. instead of use glyph-icons you can use Awesome icons that free. more information in http://fontawesome.io/3.2.1/get-started/

Upvotes: -3

RoadkillMike
RoadkillMike

Reputation: 35

The problem is likely because you have downloaded the free version of Glyphicons, which only includes bacic and social icons. If you use the free version, some icons are simply not there, and will render the square.

I switched to using a CDN and linking in my head and everything worked!

CDN: https://www.bootstrapcdn.com/

Upvotes: 0

Utkarsh Patil
Utkarsh Patil

Reputation: 39

Check if 'font' directory is available in your root folder, as most of the bootstrap CSS directs to glyphicon fonts which must be clubbed in some folder within the root folder or home folder directory.

Upvotes: 0

Daniel Faria
Daniel Faria

Reputation: 1484

Guys the issue was font files were corrupteds, the weird is that I've tried download bootstrap 3 times from differents devices and all of then I had the same issue. The most strange is that I research a lot for days and apparently nobody had the same issue. So.. thats it!

Upvotes: 10

Hunyo Silaw
Hunyo Silaw

Reputation: 105

in your bootstrap.css try to add !important in .glyphicon font-family..

.glyphicon {
   font-family:'Glyphicons Halflings' !important;
   // more css comes along here
}

other css might cause conflict to change the glyphicons font-family.

Upvotes: 8

llewan
llewan

Reputation: 1

For me it was a permission problem. The fonts didnt have the appropriate permissions

Upvotes: 0

paaacman
paaacman

Reputation: 3012

See Stijn answer:

Note to readers: be sure to read @user2261073's comment and @Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.

Upvotes: 1

Littlebobbydroptables
Littlebobbydroptables

Reputation: 3731

For me it was 

src: font-url("../fonts/glyphicons-halflings-regular.eot");

instead of 

src: url("../fonts/glyphicons-halflings-regular.eot");

changed, and works perfectly :)

Upvotes: 0

Diego
Diego

Reputation: 366

Try re-downloading the fonts, may be corrupt.

Check the MD5

MD5 (glyphicons-halflings-regular.eot) = 2469ccfe446daa49d5c1446732d1436d
MD5 (glyphicons-halflings-regular.svg) = 3b31e1de93290779334c84c9b07c6eed
MD5 (glyphicons-halflings-regular.ttf) = aa9c7490c2fd52cb96c729753cc4f2d5
MD5 (glyphicons-halflings-regular.woff) = 7c4cbe928205c888831ba76548563ca3

Upvotes: 16

Subtletree
Subtletree

Reputation: 3329

This worked for me:

In bootstrap.css this is the link to the fonts. (Line 2386 or just search for face)

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
  url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Removing the '..' before each link worked for me

e.g 

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('/fonts/glyphicons-halflings-regular.eot');
  src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Upvotes: 3

KKS
KKS

Reputation: 3630

I have just tried removing the font for a icon on tb3 site and it displays as a square. Make sure you have the font folder in the same level as your css folder, provided font folder has all the files.

the structure should be:

- css
  -bootstrap-theme.css
  -bootstrap-theme.min.css
  -bootstrap.css
  -bootstrap.min.css

-fonts
  -glyphicons-halflings-regular.eot
  -glyphicons-halflings-regular.svg
  -glyphicons-halflings-regular.ttf
  -glyphicons-halflings-regular.woff

css code: font-family: 'Glyphicons Halflings'

Upvotes: 1

Related Questions