0

It looks similar to this here:

Glyphicons rendering as empty box

But I don't know what the darn problem is I've tried Googling everything. I believe it started when I tried bootstrap for the first time. I've read that it was the fonts being corrupted so I redownloaded from the website and that didn't work..

All the other solutions seem to be if you're making a project.. but mine is happening on every browswer. I thought it was the glyphicons that are messed up but i can see these all just fine:

http://getbootstrap.com/components/

but there are definitely some things that aren't rendering properly. Help please!

EDIT: I don't have a website, it's just websites out in the web that are using bootstrap (I think), some of the fonts(?) are not rendering and I just see a square box. I'm associating the problem with bootstrap though because it only starting happening when I started messing with it for some web projects.

Community
  • 1
  • 1
user1189352
  • 3,628
  • 12
  • 50
  • 90
  • Can you provide some code for the process in which you are implementing the icons? – IMI Jul 16 '15 at 16:53
  • there's no code, it's just all my browsers when i'm just viewing websites that i believe are using some bootstrap stuff – user1189352 Jul 16 '15 at 16:58
  • This really isn't a code issue then as it's something wrong with your device/browser/ etc. Then again, I don't know if that's what you mean either. Question still isn't all that clear. – patricksweeney Jul 16 '15 at 17:04
  • hm wish i could clarify some more. i guess what i'm tryign to say is that this problem only started happening when i installed bootstrap into a project i was messing with. and then after that, my browser started rendering things incorrectly.. so i figured they were related. – user1189352 Jul 16 '15 at 17:05

2 Answers2

2

Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Utilize the relative URLs option provided by the Less compiler. Change the url() paths in the compiled CSS.

Make sure that the path to your icons is in the correct directory.

Also make sure you define them with aria-hidden attribute.

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Can you provide a link to your site, so I can see exactly what's happening?

Lottamus
  • 457
  • 4
  • 7
  • reading your post right now FantasyHub but right now I don't have a website. I'm just talking about when I browse websites on the web that are using bootstrap in general. Sorry I should've clarified – user1189352 Jul 16 '15 at 16:59
0

Check glyphicons.less inside the Less file and look at the sources :

// Import the fonts
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('@{icon-font-path}@{icon-font-name}.eot');
  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
       url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
       url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
       url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
       url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
}

if you've put the fonts at the same location than glyphicons you can change the @{icon-font-name} by the name of your font it will work.

Here is an exemple : 

src:url('@{icon-font-path}myfont.eot');
bep42
  • 351
  • 4
  • 14