Bootstrap 3 Glyphicons CDN

Question

请注意!

此拉取请求合并后,Bootstrap图标将恢复.

---

在过去几周内来回反复进行此操作后,我决定将Glyphicons图标字体恢复为主回购.鉴于图标在UI中的流行程度如何,对于大多数人而言,如果不将它们(或其他图标字体)包含在与CSS和JS相同的位置,则可能是一种损害.

此更新如下:

• 恢复文档(在"组件"页面上)
• 新变量,@icon-font-path以及@icon-font-name添加和删​​除图标字体的灵活性
• 升级到最新的Glyphicons(添加40个新图标)
• 从CSS页面中删除旧的Glyphicons提及

我们将来会改进图标字体的自定义,因此交换字体库可以更容易(这是原始删除的整个动机).

---

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

从Bootstrap 3,他们被移动到一个单独的存储库,但我没有找到任何CDN.

从官方文档:

随着Bootstrap 3的推出,图标已被移动到一个单独的存储库中.这使主要项目尽可能精简,使人们更容易交换图标库,并使得Glyphicons图标字体更容易被更多人在Bootstrap之外使用.

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

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

Answer 1

随着最近发布的bootstrap 3,以及glyphicons被合并回主Bootstrap repo,Bootstrap CDN现在提供包括Glyphicons在内的完整Bootstrap 3.0 css.您只需要包含Bootstrap css参考:Glyphicons及其依赖项位于CDN站点的相对路径上,并在中引用bootstrap.min.css.

在html中:

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

在css中:

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

这是一个工作演示.

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

例:

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

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

如果您想单独使用Glyphicons,可以直接引用Bootstrap CDN上的Glyphicons css来实现.

在html中:

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

在css中:

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

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

这是一个没有Bootstrap的Glyphicons 的工作演示.

Answer 2

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

包括Font-Awesome

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

<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>

它包含很多图标!

Answer 3

如果您只想拥有字形图标而不需要任何额外的 css，您可以创建一个 css 文件并将下面的代码放入主 css 文件中。

我必须创建这个额外的文件，因为下面的链接也弄乱了我的网站样式。

//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

我没有直接使用它，而是创建了一个 css 文件bootstrap-glyphicons.css

//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

并将创建的 css 文件导入到我的主 css 文件中，这使我能够仅导入字形。希望这有帮助

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