Member Avatar for OsaMasw

Hello there am using bootstrap a long time ago but this is the first time I had an issue like this,
normally when adding an icon to button its should appears like this

<span class="glyphicon glyphicon-search"></span>

e16ba87456c60933b47a886f3bd7c753

but today I found its appears like this

399d82ee4052075368a7f6f6c19a1051

just look for the icon not for the colors :P
I thought its because of browser, I've test it on multiple browsers and same results :(

  • 5 Contributors
  • 10 Replies
  • 325 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by OsaMasw

Dani AI

Generated

If the icon glyphs show up as letters, empty squares or the wrong shapes, the icon font itself is not being used by the browser. That can come from a missing/incorrect font file, a bad path in the theme CSS, cross‑origin blocking, wrong MIME/encoding on the server, or simply loading the theme CSS in the wrong order. This thread touches on those areas already (good catches from and ); below are practical checks and fixes that solve this class of problem quickly.

Quick checklist to reproduce the failure and find the root cause:

  1. Open DevTools → Network, filter for font files (woff/ttf/eot/svg) and reload. Look for 404/403 or CORS errors.
  2. Check the Console for CORS or MIME-type warnings.
  3. Inspect the icon element (and its ::before) and view Computed styles: note the content value and the font-family used for that pseudo-element. If content is an escaped code and the font-family is not the icon font, the wrong font is being applied.
  4. Verify CSS load order: base Bootstrap must be loaded before any theme/override file. Some theme files are only "overwrites" and assume the core CSS is present.
  5. Test in a fresh/private window or after clearing the browser cache to rule out caching.

Common fixes (apply only what you need):

  • Fix the font path inside the CSS or add an explicit @font-face that points to the correct font files on your server:
@font-face {
  font-family: "Glyphicons Halflings";
  src: url("/fonts/glyphicons-halflings-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
  • If fonts are loaded cross-domain, enable CORS and correct MIME types (Apache example):
<IfModule mod_mime.c>
  AddType application/vnd.ms-fontobject .eot
  AddType font/ttf .ttf
  AddType font/otf .otf
  AddType font/woff .woff
  AddType font/woff2 .woff2
  AddType image/svg+xml .svg
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|eot|woff|woff2|svg)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Why you may have seen mixed results in different themes/browsers: some BootsWatch theme files include icon-related rules while others are only overrides; browsers also enforce font CORS and caching differently, so a change can appear to "fix" it in one browser while another still shows the issue. Follow the checklist above to confirm the exact failure (network status + console message) and then apply the specific fix (correct path, enable CORS, or include the base Bootstrap CSS before the theme).

Recommended Answers

All 10 Replies

Member Avatar for Member #120589

Is the sprite-sheet local or remote? Could a new version of the sprite sheet have been used? Have a look at the "inspect elements" or similar in your browser?

Member Avatar for mattster

This is because the font library is being included from a remote location, easily solved by including a library hosted on your own site :)

Member Avatar for <M/>

As mattster has said, is the library from a remote location? If so, that means that it can be changed by someone else (or from whomever that you are using it from).

Member Avatar for OsaMasw

the css file is hosted in my script
in folder /css in localhost
when I use another css from different colors like its working perfectly,
I used this one
the view as pictures above.

this is live example from test site :

Edited by OsaMasw because: adding live preview
Member Avatar for mattster

I think it just so happens that the Cerulean contains some sort of overwrite for the icons, that being the only reason why it worked.

BTW: the reason I say to include the origional bootstrap file is that http://bootswatch.com/cosmo/ do on their demo!

Member Avatar for OsaMasw

I really don't know what is the problem but now every css from bootswatch not viewing icons properly :(, maybe is it encoding problems ?

Member Avatar for mattster

Probably not to be honest, but maybe.

BUT YOURS NOW LOOKS LIKE IT'S WORKING!! YAY!!

Member Avatar for Luther78

Maybe because of location.

Member Avatar for OsaMasw

, its still not working even after changing the css file
7fadaa57d8161a7902a382ed5984eb53

I put icon only on search form, only the main bootstrap css working properly, I guess i must change my site theme because of this problem :(

EDIT: i've used another browser and its working :D, now thats really wierd problem.

Edited by OsaMasw
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.