How can I use Bootstrap Glyphicons independently from Bootstrap?

Twitter Bootstrap Glyphicons CDN Returns

After a recent merger pull request, Bootstrap's renowned Glyphicons icon font has been reintegrated into the main repository. This reinstates a fundamental element of user interface design, as icons play a vital role in UI navigation and comprehension.

CDN URL for Bootstrap Glyphicons

The Bootstrap 3.0 CDN now hosts the complete Bootstrap 3.0 CSS, including the Glyphicons. In HTML, you can include Glyphicons with this reference:

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

For CSS, use this import statement:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Using Glyphicons Independently

For projects that do not utilize the entire Bootstrap framework, the Glyphicons can be referenced separately through the Bootstrap CDN.

In HTML:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

In CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

Additional Considerations

When using Glyphicons separately from Bootstrap, ensure that the necessary dependencies are included in the relative path of the Bootstrap CDN. Furthermore, note that .glyphicon classes have replaced .icon classes.

Usage Example

To use the heart icon, replace .icon-heart with .glyphicon-heart:

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

For JavaScript component integration, remember to include bootstrap.min.js separately.

The above is the detailed content of How can I use Bootstrap Glyphicons independently from Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!