请注意!此拉取请求合并后,Bootstrap图标将恢复 . 在过去几周内来回反复进行此操作后,我决定将Glyphicons图标字体恢复为主回购 . 鉴于图标在UI中的流行程度如何,对于大多数人而言,如果不将它们(或其他图标字体)包含在与CSS和JS相同的位置,则可能是一种损害 . 通过此更新,可以执行以下操作:恢复文档(在“组件”页面上)新变量,@ icon-font-path和@ icon-font-name,以便灵活添加和删除图标字体升级到最新的Glyphicons(添加40个新图标)从CSS页面中删除旧的Glyphicons提及我们将来会改进图标字体的自定义,因此交换字体库可以更容易(这是原始删除的全部动机) .
哪个是新版Twitter Bootstrap Glyphicons的CDN网址?
从Bootstrap 3 they were moved into a separate repository,但我没有找到任何CDN .
从官方文档:
随着Bootstrap 3的推出,图标已被移动到一个单独的存储库中 . 这使主要项目尽可能精简,使人们更容易交换图标库,并使得Glyphicons图标字体更容易被更多人在Bootstrap之外使用 .
在official website上,他们没有为图标提供CDN网址 .
在哪里可以找到它?我不想下载存储库并将其包含在我的项目中 .
3 回答
使用最近的release of bootstrap 3,并且将glyphicons合并回主Bootstrap仓库,Bootstrap CDN现在正在服务 the complete Bootstrap 3.0 css including Glyphicons . 您只需要包含Bootstrap css参考:Glyphicons及其依赖项位于CDN站点的相对路径上,并在
bootstrap.min.css
中引用 .在html中:
在css中:
这是一个工作 demo .
Note 您必须使用
.glyphicon
类而不是.icon
:例:
Also note 您仍然需要包含
bootstrap.min.js
以使用Bootstrap JavaScript组件,请参阅Bootstrap CDN for url .If you want to use the Glyphicons separately ,您可以通过直接引用Bootstrap CDN上的Glyphicons css来实现 .
在html中:
在css中:
由于
css
文件已经包含了所有需要的Glyphicons依赖项(它们位于Bootstrap CDN站点的相对路径中),因此添加css
文件就是开始使用Glyphicons的全部工作 .这是一个没有Bootstrap的Glyphicons的工作demo .
另一种方法是使用Font-Awesome作为图标:
包括Font-Awesome
打开Font-Awesome on CDNJS并复制最新版本的CSS网址:
或者在CSS中
例如(注意,版本会改变):
用法:
它包含a lot of icons!
虽然Bootstrap CDN将glyphicons恢复为bootstrap.min.css,但Bootstrap CDN的Bootswatch css文件不包含glyphicons .
例如Amelia主题:http://bootswatch.com/amelia/
默认Amelia在此文件中有glyphicons:http://bootswatch.com/amelia/bootstrap.min.css
但Bootstrap CDN 's css file doesn' t包括glyphicons:http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css
所以@edsioufi提到,如果你使用bootstrap CDN中的Bootswatch文件,你应该包括glphicons css . 档案:http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css