我可以从 CDN 获取 Bootstrap 个 Glyphicons 吗？

Question

我是 BS 的新手。我正在从 MaxCDN 检索 Bootstrap CSS 和 JS 文件的 v3.3.6。我希望也有一种方法可以包含字形图标，但我不知道该怎么做。是否可以从 CDN 检索字形图标？

此外，我不明白 Bootstrap download page 指的是什么 "Precompiled Bootstrap" 为什么我想要预编译下载与 MaxCDN 下载。我看到预编译提供了字形，所以也许这是唯一的原因。

Answer 1

关于 Glythicon 问题

随着新版本bootstrap（Bootstrap4）； Glythicons 已被完全删除，因此请考虑弃用它们并尽量不要在当前或未来的项目中使用它们。话虽如此，FontAwesome 是一个了不起的轻量级库，它有一个很好的 CDN 并且非常易于使用。

CDN https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

如果你想偷懒，你应该总是尝试偷懒！使用下面的代码，与任何 link 一样，粘贴到您的项目的头部以立即开始使用它！

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

FontAwesome 是一个内容丰富的字体图标库，您可以通过 class 调用将其添加到任何 DOM 元素。它对浏览器也非常友好，不需要 any javascript 即可工作。

这是入门指南： https://fortawesome.github.io/Font-Awesome/get-started/

图标列表如下： https://fortawesome.github.io/Font-Awesome/icons/

关于预编译与 CDN 的问题

如果您不打算以任何方式为您的项目修改库（通常您不应该以任何方式修改），使用 CDN 总是好过手动将其下载到您的项目中。您将获得显着的性能提升，并减轻 git 存储库的负载。

预编译版本的另一个好处是它允许您将代码直接集成到您的前端。如果您使用像 gulp or grunt 这样的节点任务运行程序，您可以获取代码，更改它以匹配您的主题或偏好，然后将其直接折叠到您的工作代码中。这使您可以开发自己的 bootstrap.

风味

但通常情况下，标准版本就可以了，因为您以后可以用自己的 css 覆盖它。如果这对您来说没问题，那么只需使用 CDN，因为它将为您提供 Bootstrap 的标准版本。

希望对您有所帮助！

Answer 2

如果您像这样在 HTML 文件中包含样式表 bootstrap.min.css（例如）：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

然后 Glyphicons 字体将自动从同一位置下载：

//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2

这是因为字体是使用 relative URLs 加载的。解析 bootstrap.min.css 中的 CSS 时，下载它的 URL 将用作基础，而不是您网站的 URL.

关于预编译Bootstrap：如果您想在自己的网络服务器上托管文件（出于某种原因），这很有用。它们以 zip 文件的形式提供，其中包含开箱即用的上述行为正确运行所需的正确目录结构。它被标记为预编译，因为您可以选择下载源文件。虽然 CSS 和 JavaScript 文件本身被认为是源文件，但 Bootstrap 在其 CSS 上使用 预编译器 来制作它他们更容易编写大文件。他们还使用几个较小的 JavaScript 文件，这些文件合并在一起以通过构建脚本发布。您可以在 their GitHub repository.

上看到实际效果

Answer 3

对于在 Rails 中使用 bootstrap-sass gem 执行此操作的任何人，您将不会在 bootstrap 中手动包含主样式表 html，并且您也无法重新定义 $icon-font-path 来完成此操作，因为该域最终将被您的应用程序替换。

而是在导入后重新定义 Glyphicons 的 @font-face 声明 bootstrap。所以，在 stylesheets/application.scss:

@import "bootstrap-sprockets";
@import "bootstrap";

@font-face{
  font-family:'Glyphicons Halflings';
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot");
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2") format("woff2"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff") format("woff"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf") format("truetype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg")
}

我发现在使用 Heroku 的管道时这是必要的，以避免为暂存应用程序编译这些路径，导致生产应用程序指向回暂存以加载 Glyphicons。

Answer 4

在导入整个 Bootstrap 的地方，您可以只导入 Bootstrap Glyphicons:

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

我可以从 CDN 获取 Bootstrap 个 Glyphicons 吗？

Can I Get Bootstrap Glyphicons from a CDN?

twitter-bootstrap

cdn

glyphicons