twitter-bootstrap 我可以从 CDN 获取 Bootstrap Glyphicons 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34340309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I Get Bootstrap Glyphicons from a CDN?
提问by Tom Baxter
I'm brand new to BS. I am retrieving v3.3.6 of the Bootstrap CSS and JS files from MaxCDN. I was hoping there would be a way to include the glyphicons as well but I can't see how to do that. Is it possible to retrieve the glyphicons from a CDN?
我是 BS 的新手。我正在从 MaxCDN 检索 Bootstrap CSS 和 JS 文件的 v3.3.6。我希望有一种方法可以包含字形，但我不知道如何做到这一点。是否可以从 CDN 中检索字形？
Also, I do not understand what the Bootstrap download pagemeans when it refers to "Precompiled Bootstrap" Why would I want the precompiled download vs. the MaxCDN download. I see the precompiled provides the glyphicons so maybe that's the only reason.
另外，我不明白Bootstrap 下载页面在提到“预编译 Bootstrap”时的含义为什么我想要预编译下载与 MaxCDN 下载。我看到预编译提供了字形，所以也许这是唯一的原因。
回答by MTCoster
If you include the stylesheet bootstrap.min.cssin your HTML file like this (for example):
如果您bootstrap.min.css像这样在 HTML 文件中包含样式表（例如）：
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
Then the Glyphicons font(s) will automatically be downloaded from the same location:
然后 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
This is because the fonts are loaded using relativeURLs. When the CSS in bootstrap.min.cssis parsed, the URL from which it was downloaded is used as the base, not your website's URL.
这是因为字体是使用相对URL加载的。bootstrap.min.css解析CSS in 时，下载它的 URL 将用作基础，而不是您网站的 URL。
With regards to precompiled Bootstrap: This is useful if you want to host the files on your own web server (for some reason). They are made available as a zip file containing the correct directory structure required for the above behaviour to function correctly out of the box. It's labelled as precompiled, because you could alternatively download the source files. Although CSS and JavaScript files are considered source files in their own right, Bootstrap uses a precompileron its CSS to make it easier for them to write the large files. They also use several smaller JavaScript files which are merged together for release by a build script. You can see this in action at their GitHub repository.
关于预编译的 Bootstrap：如果您想在自己的 Web 服务器上托管文件（出于某种原因），这很有用。它们以 zip 文件的形式提供，其中包含上述行为开箱即用所需的正确目录结构。它被标记为预编译，因为您也可以下载源文件。尽管 CSS 和 JavaScript 文件本身就被认为是源文件，但 Bootstrap在其 CSS 上使用了预编译器，使它们更容易编写大文件。他们还使用几个较小的 JavaScript 文件，这些文件合并在一起以通过构建脚本发布。您可以在他们的 GitHub 存储库中看到这一点。
回答by Jonjoe
Regarding the Glythicon Question
关于 Glythicon 问题
With the new version of bootstrap (Bootstrap 4); Glythicons have been completely removed so consider them deprecated and try not to use them in current or future projects. With that said FontAwesome is an amazing, lightweight, library that has a nice CDN and is very easy to use.
随着新版本的bootstrap（Bootstrap 4）；Glythicons 已被完全删除，因此认为它们已被弃用，并尽量不要在当前或未来的项目中使用它们。话虽如此，FontAwesome 是一个了不起的、轻量级的库，它有一个很好的 CDN 并且非常易于使用。
CDN https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
CDN https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
If you wanna be lazy, and you should always try and be lazy! Use the code below, as with any link, paste into the head of your project to get started with it straight away!
如果你想偷懒，你应该总是试着偷懒！使用下面的代码，与任何链接一样，粘贴到您的项目的头部以立即开始使用它！
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
FontAwesome is an extensive library of font icons that you can add to any DOM element via class calls. Its also very browser friendly and does not require anyjavascript to work.
FontAwesome 是一个广泛的字体图标库，您可以通过类调用将其添加到任何 DOM 元素。它对浏览器也非常友好，不需要任何javascript 即可工作。
Heres the getting started guide: https://fortawesome.github.io/Font-Awesome/get-started/
这是入门指南：https: //fortawesome.github.io/Font-Awesome/get-started/
And here are the icon lists: https://fortawesome.github.io/Font-Awesome/icons/
这里是图标列表：https: //fortawesome.github.io/Font-Awesome/icons/
Regarding the Precompiled vs CDN Question
关于预编译 vs CDN 问题
If your not going to be modifying the library in any way for your project (which typically you shouldn't do any way) its always good to use a CDN over downloading it manually into your project. You will get significant performance gains and it lightens the load for your git repo.
如果您不打算以任何方式为您的项目修改库（通常您不应该这样做），最好使用 CDN 而不是手动将其下载到您的项目中。您将获得显着的性能提升，并减轻 git 存储库的负载。
One of the other benefits of the precompiled version is that it allows you to integrate the code directly into your frontend. If your using a node task runner like gulpor gruntyou can take the code, alter it to match your theme or preferences, then fold it straight into your working code. This allows you to develop your own flavour of bootstrap.
预编译版本的其他好处之一是它允许您将代码直接集成到前端。如果您使用像gulp或grunt这样的节点任务运行器，您可以获取代码，对其进行更改以匹配您的主题或偏好，然后将其直接折叠到您的工作代码中。这允许您开发自己的引导程序风格。
Typically however the standard version is just fine as you can overwrite it with your own css later. If this is ok for you then just use the CDN as that will serve you a standard version of Bootstrap.
但是通常标准版本就可以了，因为您可以稍后用自己的 css 覆盖它。如果这对您来说没问题，那么只需使用 CDN，因为它会为您提供标准版本的 Bootstrap。
Hope this helps!
希望这可以帮助！
回答by R. Gurung
In the place of importing the whole Bootstrap you can import Bootstrap Glyphicons only:
在导入整个 Bootstrap 的地方，您只能导入 Bootstrap Glyphicons：
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
回答by AFOC
For anyone doing this in Rails using bootstrap-sass gem, you won't be including the main bootstrap stylesheet manually in html, and you can't redefine $icon-font-path to accomplish this either, as the domain will be end up replaced with your app's.
对于使用 bootstrap-sass gem 在 Rails 中执行此操作的任何人，您将不会在 html 中手动包含主引导程序样式表，并且您也不能重新定义 $icon-font-path 来完成此操作，因为域将结束替换为您的应用程序。
Instead redefine the @font-face declaration for Glyphicons after importing bootstrap. So, in stylesheets/application.scss:
而是在导入引导程序后重新定义 Glyphicons 的 @font-face 声明。所以，在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")
}
I found this to be necessary when using Heroku's pipeline to avoid these paths being compiled for the staging app, resulting in the production app pointing back to staging to load Glyphicons.
我发现在使用 Heroku 的管道以避免为暂存应用程序编译这些路径时，这是必要的，导致生产应用程序指向暂存以加载 Glyphicons。
