Why Are My Glyphicons Not Displaying Properly in Bootstrap 3?

Troubleshooting Improper Glyphicon Display in Bootstrap 3

In your migration from Bootstrap 2.3 to Bootstrap 3, you encountered an issue where glyphicon icons are not displaying correctly. This issue is particularly prevalent in Firefox.

Origin of the Problem:

The problem stems from an issue with the font files included in the customized version of Bootstrap. These files are broken, resulting in improper icon display.

Solution:

To resolve this, you can either manually download the font files and replace your own files or simply use the CDN.

Manual Download Option:

1. Visit the following links to download the 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 in your Bootstrap installation directory.
3. Perform a strong reload (CTRL F5) to apply the changes.

CDN Usage Option:

If you prefer to use the CDN, you do not need to manually replace the font files. Simply include the following CDN link in your HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

This will ensure that the correct font files are loaded from the CDN, resolving the icon display issue.

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