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