关于html：Bootstrap 3 Glyphicons CDN


Bootstrap 3 Glyphicons CDN

PAY ATTENTION!

The Bootstrap icons are back after this pull request merge.

After going back and forth on this for the last couple weeks, I've decided to restore the Glyphicons icon font to the main repo. Given how prevalent icons are in UIs, it's probably a disservice to most folks to not include them (or some other icon font) in the same spot as the CSS and JS.

With this update comes the following:

  • Restores documentation (on the Components page)
  • New variables, @icon-font-path and @icon-font-name, for flexibility in adding and removing icon fonts
  • Upgrades to latest Glyphicons (adding 40 new icons)
  • Removes the old Glyphicons mention from the CSS page

We'll work on improving the customization of icon fonts in the future so swapping font libraries can be easier (which was the whole motivation for the original removal).

新版Twitter Bootstrap Glyphicons的CDN网址是哪个？

他们从Bootstrap 3中移到了一个单独的存储库中，但是我没有找到任何CDN。

从官方文档中：

With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.

在官方网站上，他们没有提供图标的CDN网址。

在哪里可以找到它？ 我不想下载存储库并将其包含到我的项目中。

相关讨论

随着Bootstrap 3的最新发行版以及glyphicons被合并回Bootstrap主仓库中，Bootstrap CDN现在正在为包括Glyphicons在内的完整Bootstrap 3.0 css提供服务。您只需要包括Bootstrap css参考：Glyphicons及其依赖项位于CDN站点上的相对路径上，并在bootstrap.min.css中进行引用。

在html中：

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

在CSS中：

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

这是一个工作示例。

请注意，您必须使用.glyphicon类而不是.icon：

例：

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

另请注意，您仍需要包括bootstrap.min.js来使用Bootstrap JavaScript组件，有关URL，请参见Bootstrap CDN。

如果要单独使用Glyphicons，则可以通过直接引用Bootstrap CDN上的Glyphicons css来实现。

在html中：

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

在CSS中：

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

由于css文件已经包含所有必需的Glyphicons依赖项(它们位于Bootstrap CDN站点的相对路径中)，因此添加css文件是开始使用Glyphicons的全部工作。

这是不带Bootstrap的Glyphicons的工作演示。

相关讨论

一种替代方法是对图标使用Font-Awesome：

包括超赞字体

在CDNJS上打开Font-Awesome并复制最新版本的CSS url：

1
<link rel="stylesheet" href="<url>">

或在CSS中

1
@import url("<url>");

例如(请注意，版本将更改)：

1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

用法：

1
<i class="fa fa-bed">

它包含很多图标！

相关讨论

尽管Bootstrap CDN将字形恢复到bootstrap.min.css，但是Bootstrap CDN的Bootswatch css文件不包含字形。

例如Amelia主题：http://bootswatch.com/amelia/

默认的Amelia在此文件中包含字形：http://bootswatch.com/amelia/bootstrap.min.css

但是Bootstrap CDN的css文件不包含字形图标：http：//netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

因此，如@edsioufi所述，如果您使用引导CDN中的Bootswatch文件，则应该包括glphicons css。文件：http：//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

相关讨论