首页 >web前端 >css教程 >如何将 Twitter Bootstrap Glyphicons 与恢复的 CDN 结合使用?

如何将 Twitter Bootstrap Glyphicons 与恢复的 CDN 结合使用?

DDD
DDD原创
2024-11-03 13:52:02238浏览

How Can I Use Twitter Bootstrap Glyphicons with the Restored CDN?

Bootstrap 3 Glyphicons CDN:恢复和改进

最近,Twitter Bootstrap 欢迎将 Glyphicons 图标字体重新引入其核心存储库。认识到图标在用户界面中的广泛使用,Bootstrap 团队恢复了 Glyphicons,并进行了许多增强功能:

  • 文档现已在组件页面上恢复。
  • 新变量(@icon-font-path 和 @icon-font-name)在使用图标字体时提供更大的灵活性。
  • 集成了最新版本的 Glyphicons,添加了 40 个新图标。
  • 任何提及旧 Glyphicons 的内容均已从 CSS 页面中删除。

Twitter Bootstrap Glyphicons 的 CDN URL

将 Glyphicons 合并回 Bootstrap repo 中,Bootstrap CDN 现在提供完整的 Bootstrap 3.0 CSS,包括 Glyphicons。只需引用 Bootstrap CSS,即可完成设置:Glyphicons 及其依赖项可在相对路径上使用,并合并到 bootstrap.min.css 中。

<code class="html"><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"></code>
<code class="css">@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");</code>

独立 Glyphicons (可选)

如果您喜欢单独使用 Glyphicons,您可以参考 Bootstrap CDN 上的专用 Glyphicons CSS 文件:

<code class="html"><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"></code>
<code class="css">@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");</code>

此方法包括所有必要的Glyphicons 依赖项,因此您可以立即开始使用它们。

注意:

  • 使用 .glyphicon 类而不是 .icon
  • 用于JavaScript 组件,包括 bootstrap.min.js

以上是如何将 Twitter Bootstrap Glyphicons 与恢复的 CDN 结合使用?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn