Twitter Bootstrap 3 icon displaying a square

Question

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

check in different browsers, font files are loading correctly or not, also make sure the mime type is set accordingly. — KKS, Sep 04 '13 at 00:11
Chrome is displaying a square and FF is displaying a strange code. — Daniel Faria, Sep 08 '13 at 16:33
I was taking over a code base for someone and the issue for me was that they were using instead of using span — Braden Brown, Jul 11 '18 at 19:42

score 16 · Answer 1 · answered Sep 13 '13 at 02:55

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

Daniel Faria · Accepted Answer · 2014-10-02T02:48:57.417

10

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!

edited Oct 02 '14 at 02:48

answered Sep 18 '13 at 22:45

Daniel Faria

1,476
5
24
45

I am having the same issue. how did you get the correct files finally? I have also downloaded it many times, and it seems that all of them is "corrupted"..... – Brian Sep 20 '13 at 08:35
1

@Brian I had the same issue, I wget the files from the links in there:http://stackoverflow.com/questions/18245575/bootstrap-3-unable-to-display-glyphicon-properly the md5sum look allright according to the answer above – Cesc Nov 14 '13 at 05:58
I am running into this as well, however it seems to only be an issue in Chrome. Of all things, it works fine in IE. – Steven Feb 07 '14 at 18:56

score 8 · Answer 3 · answered Mar 21 '14 at 18:27

8

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.

answered Mar 21 '14 at 18:27

Hunyo Silaw

105
3
7

This worked for me, with Bootstrap 3. – Qasim Nov 21 '22 at 06:08

score 3 · Answer 4 · answered Sep 04 '13 at 07:34

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');
}

Although this max fix the issue, editing the source file is bad practice and can cause issues later when you need to update bootstrap. Probably another answer is preferable — Subtletree, Oct 28 '15 at 00:11

KKS · Answer 5 · 2013-09-04T00:38:31.437

1

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'

edited Sep 04 '13 at 00:38

answered Sep 04 '13 at 00:15

KKS

3,600
1
27
54

theres a folder css and a folder fonts. I tried put font files inside css folder together css files but still displaying a square – Daniel Faria Sep 04 '13 at 00:33
@DanielFaria check my answer again. – KKS Sep 04 '13 at 00:38
structure is exactly like that – Daniel Faria Sep 04 '13 at 00:47
@DanielFaria then make sure you don't have any console errors like may be any css, font file is not found. what browser are u using? and hav u tried testing in any other browser? – KKS Sep 04 '13 at 00:49
@DanielFaria hey what's the issue? have you tried in any other browser? – KKS Sep 10 '13 at 23:27

score 1 · Answer 6 · edited May 23 '17 at 11:54

1

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.

edited May 23 '17 at 11:54

Community

1
1

answered Nov 08 '13 at 10:27

paaacman

3,012
1
20
18

score 0 · Answer 7 · answered Oct 27 '13 at 20:18

0

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 :)

answered Oct 27 '13 at 20:18

Itsmeromka

3,621
9
46
79

score 0 · Answer 8 · answered Nov 13 '13 at 14:56

0

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

answered Nov 13 '13 at 14:56

llewan

1

score 0 · Answer 9 · answered Apr 21 '15 at 09:11

0

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.

answered Apr 21 '15 at 09:11

Utkarsh Patil

29
5

score 0 · Answer 10 · answered Jul 07 '16 at 09:52

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/

score 0 · Answer 11 · answered Nov 25 '16 at 21:10

0

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

answered Nov 25 '16 at 21:10

Mike6679

5,547
19
63
108

score -3 · Answer 12 · edited Oct 10 '16 at 12:15

-3

I Have this problem and After very search :

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

edited Oct 10 '16 at 12:15

Vojtech Ruzicka

16,384
15
63
66

answered Oct 09 '16 at 19:35

sajad

1

Twitter Bootstrap 3 icon displaying a square

12 Answers12