如何独立于 Bootstrap 使用 Bootstrap Glyphicons？

Twitter Bootstrap Glyphicons CDN 返回

在最近的合并拉取请求之后，Bootstrap 著名的 Glyphicons 图标字体已重新集成到主存储库中。这恢复了用户界面设计的基本元素，因为图标在 UI 导航和理解中发挥着至关重要的作用。

Bootstrap Glyphicons 的 CDN URL

现在的 Bootstrap 3.0 CDN托管完整的 Bootstrap 3.0 CSS，包括 Glyphicons。在 HTML 中，您可以通过以下引用包含字形：

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

对于 CSS，请使用此导入语句：

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

独立使用字形

对于不使用整个 Bootstrap 框架的项目，可以通过 Bootstrap CDN 单独引用 Glyphicons。

HTML 中：

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

CSS 中：

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

其他注意事项

与 Bootstrap 分开使用 Glyphicons 时，请确保 Bootstrap CDN 的相对路径中包含必要的依赖项。此外，请注意 .glyphicon 类已替换 .icon 类。

使用示例

要使用心形图标，请将 .icon-heart 替换为 .glyphicon-heart：

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

对于 JavaScript 组件集成，请记住单独包含 bootstrap.min.js。

以上是如何独立于 Bootstrap 使用 Bootstrap Glyphicons？的详细内容。更多信息请关注PHP中文网其他相关文章！