Home  >  Article  >  Web Front-end  >  Why Are My Bootstrap 3 Glyphicons Showing 'E001' in Firefox?

Why Are My Bootstrap 3 Glyphicons Showing 'E001' in Firefox?

DDD
DDDOriginal
2024-11-09 21:24:021001browse

Why Are My Bootstrap 3 Glyphicons Showing 'E001' in Firefox?

Bootstrap 3 Glyphicon Display Issues in Firefox

Upon migrating from Bootstrap 2.3 to Bootstrap 3, users may encounter issues with glyphicon icons failing to display correctly, appearing as 'E001' instead of the intended icon. This problem is encountered specifically in Firefox while other browsers render the icons accurately.

Solution

The most likely explanation for this behavior lies in the use of the customized version of Bootstrap. In this version, the font files included in the package are corrupted (as indicated in https://github.com/twbs/bootstrap/issues/9925). To resolve this issue, follow these steps:

  1. Avoid using the CDN and manually download the following font files:
  • https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg
  • https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff
  • https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf
  • https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot
  1. Replace the existing font files with the downloaded ones.
  2. Perform a strong reload by pressing CTRL F5 in Firefox to force the browser to load the updated files.

This process should resolve the issue with glyphicon display in Firefox.

The above is the detailed content of Why Are My Bootstrap 3 Glyphicons Showing 'E001' in Firefox?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn