Bootstrap 3 Glyphicons CDN

请注意!

这个拉取请求合并之后,引导图标回来了


在过去几个星期来回之后,我决定将Glyphicons图标字体恢复到主要的回购 。 鉴于用户界面中的stream行图标,对于大多数人来说,不要将它们(或其他图标字体)包含在CSS和JS的相同位置,这可能是一种伤害。

有了这个更新来了以下内容:

  • 恢复文档(在“组件”页面上)
  • 新的variables, @icon-font-path@icon-font-name ,可以灵活地添加和删除图标字体
  • 升级到最新的Glyphicons(添加40个新图标)
  • 删除从CSS页面提到旧字形

我们将在未来改进图标字体的自定义,以便更换字体库更容易(这是原始删除的动机)。


Twitter Bootstrap Glyphicons新版本的CDNurl是?

从Bootstrap 3开始, 它们被移入一个单独的存储库 ,但是我没有find任何CDN。

从官方文档:

随着Bootstrap 3的推出,图标已经被移动到一个单独的存储库。 这使得主项目尽可能地变得精简,使得人们更容易交换图标库,并且使更多的Bootstrap以外的人更容易地使用字形图标字体。

在官方网站上,他们没有提供图标的CDNurl。

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

随着bootstrap 3的最新发布 ,以及glyphicons被合并回主Bootstrap repo, Bootstrap CDN现在提供包括Glyphicons在内的完整的Bootstrap 3.0 css 。 引导程序的CSS引用是你需要包括的所有东西:graphics和它的依赖关系在CDN网站上的相对path上,并在bootstrap.min.css中引用。

在html中:

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

在CSS中:

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

这是一个工作演示

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

例:

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

另请注意 ,您仍然需要包含bootstrap.min.js以使用Bootstrap JavaScript组件,请参阅Bootstrap CDN for url。


如果你想单独使用Glyphicons ,你可以通过引导CDN上的glyphicons css直接引用。

在html中:

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

在CSS中:

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

由于css文件已经包含了所有需要的Glyphicons依赖项(它们位于Bootstrap CDN站点的相对path中),因此添加css文件是开始使用Glyphicons所必须做的。

这里是没有Bootstrap的Glyphicons的工作演示

另一种方法是使用Font-Awesome的图标:

包括字体真棒

在CDNJS上打开Font-Awesome并复制最新版本的CSSurl:

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

或在CSS中

 @import url("<url>"); 

例如(注意,版本将会改变):

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

用法:

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

它包含了很多图标 !

虽然Bootstrap CDN将glyphicons恢复为bootstrap.min.css,但Bootstrap CDN的Bootswatch css文件不包含glyphicons。

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

默认阿米莉亚在这个文件中有glyphicons: http ://bootswatch.com/amelia/bootstrap.min.css

但引导CDN的CSS文件不包括glyphicons: http ://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

所以如@edsioufi提到的,​​如果您使用bootstrap CDN中的Bootswatch文件,则应该包含glphicons css。 File: http : bootstrap/3.0.0/css/bootstrap-glyphicons.css