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

2. Replace the existing font files with the downloaded ones.
3. 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!