首页 文章

Bootstrap 3 Glyphicons CDN

提问于
浏览
79

请注意!此拉取请求合并后,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 回答

  • 27

    使用最近的release of bootstrap 3,并且将glyphicons合并回主Bootstrap repo,Bootstrap CDN现在正在服务 the complete Bootstrap 3.0 css including Glyphicons . 您只需要包含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");
    

    这是一个工作 demo .

    Note 您必须使用 .glyphicon 类而不是 .icon

    例:

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

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


    If you want to use the Glyphicons separately ,您可以通过直接引用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的工作demo .

  • 133

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

    包括Font-Awesome

    打开Font-Awesome on CDNJS并复制最新版本的CSS网址:

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

    它包含a lot of icons

  • 2

    虽然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'包括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

相关问题