Comment puis-je utiliser les glyphicons Bootstrap indépendamment de Bootstrap ?

Twitter Bootstrap Glyphicons CDN Returns

Après une récente demande de fusion, la célèbre police d'icônes Glyphicons de Bootstrap a été réintégrée dans le référentiel principal. Cela rétablit un élément fondamental de la conception de l'interface utilisateur, car les icônes jouent un rôle essentiel dans la navigation et la compréhension de l'interface utilisateur.

URL CDN pour les glyphicons Bootstrap

Le CDN Bootstrap 3.0 désormais héberge le CSS Bootstrap 3.0 complet, y compris les Glyphicons. En HTML, vous pouvez inclure des Glyphicons avec cette référence :

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

Pour CSS, utilisez cette instruction d'importation :

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

Utiliser les Glyphicons indépendamment

Pour les projets qui n'utilisent pas l'intégralité du framework Bootstrap, les Glyphicons peuvent être référencés séparément via le CDN Bootstrap.

En HTML :

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

En CSS :

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

Considérations supplémentaires

Lorsque vous utilisez des Glyphicons séparément de Bootstrap, assurez-vous que les dépendances nécessaires sont incluses dans le chemin relatif du CDN Bootstrap. De plus, notez que les classes .glyphicon ont remplacé les classes .icon.

Exemple d'utilisation

Pour utiliser l'icône en forme de cœur, remplacez .icon-heart par .glyphicon-heart :

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

Pour l'intégration de composants JavaScript, n'oubliez pas d'inclure bootstrap.min.js séparément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!