CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbrowser
user1189352
user1189352

Reputation: 3885

Bootstrap icons rendering as an empty box on all my browsers

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.

Upvotes: 0

Views: 1443

Answers (2)

bep42
bep42

Reputation: 351

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

Upvotes: 0

Lottamus
Lottamus

Reputation: 457

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?

Upvotes: 2

Related Questions