当前位置：theitroad>Html Bootstrap 3 Glyphicons CDN

Html Bootstrap 3 Glyphicons CDN

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/18222849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 12:08:21 　来源:igfitidea点击:

Bootstrap 3 Glyphicons CDN

htmlcsstwitter-bootstrapcdntwitter-bootstrap-3

提问by Ionic? Biz?u

PAY ATTENTION!

The Bootstrap icons are backafter this pull request merge.

After going back and forth on this for the last couple weeks, I've decided to restore the Glyphicons icon font to the main repo. Given how prevalent icons are in UIs, it's probably a disservice to most folks to not include them (or some other icon font) in the same spot as the CSS and JS.

With this update comes the following:

  • Restores documentation (on the Components page)
  • New variables, @icon-font-pathand @icon-font-name, for flexibility in adding and removing icon fonts
  • Upgrades to latest Glyphicons (adding 40 new icons)
  • Removes the old Glyphicons mention from the CSS page

We'll work on improving the customization of icon fonts in the future so swapping font libraries can be easier (which was the whole motivation for the original removal).

请注意！

在这个 pull request merge之后，Bootstrap 图标又回来了。

在过去几周反复讨论之后，我决定将 Glyphicons 图标字体恢复到主 repo。考虑到图标在 UI 中的流行程度，不将它们（或其他一些图标字体）与 CSS 和 JS 放在同一位置对大多数人来说可能是一种伤害。

此更新包含以下内容：

  • 恢复文档（在组件页面上）
  • 新变量@icon-font-path和@icon-font-name，用于灵活添加和删除图标字体
  • 升级到最新的 Glyphicons（添加 40 个新图标）
  • 从 CSS 页面中删除旧的 Glyphicons 提及

未来我们将致力于改进图标字体的自定义，以便更轻松地交换字体库（这是原始删除的全部动机）。

Which is the CDN url of the new version of Twitter Bootstrap Glyphicons?

新版 Twitter Bootstrap Glyphicons 的 CDN url 是哪个？

From the Bootstrap 3 they were moved into a separate repository, but I didn't find any CDN.

从 Bootstrap 3 开始，它们被移到了一个单独的存储库中，但我没有找到任何 CDN。

From the official documentation:

来自官方文档：

With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.

随着 Bootstrap 3 的推出，图标已移至单独的存储库。这使主要项目尽可能精简，使人们更容易交换图标库，并使 Glyphicons 图标字体更容易被 Bootstrap 之外的更多人使用。

On the official websitethey don't provide a CDN url for icons.

在官方网站上，他们不提供图标的 CDN 网址。

Where can find it? I don't want to download the repository and include it into my project.

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

回答by edsioufi

With the recent release of bootstrap 3, and the glyphicons being merged back to the main Bootstrap repo, Bootstrap CDNis now serving the complete Bootstrap 3.0 css including Glyphicons. The Bootstrap css reference is all you need to include: Glyphicons and its dependencies are on relative paths on the CDN site and are referenced in bootstrap.min.css.

随着最近发布的 bootstrap 3以及 glyphicons 被合并回主 Bootstrap 存储库，Bootstrap CDN现在提供完整的 Bootstrap 3.0 css，包括 Glyphicons。Bootstrap css 参考是您需要包含的全部内容： Glyphicons 及其依赖项位于 CDN 站点上的相对路径上，并在bootstrap.min.css.

In html:

在 HTML 中：

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

In css:

在 CSS 中：

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

Here is a working demo.

这是一个工作演示。

Notethat you have to use .glyphiconclasses instead of .icon:

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

Example:

例子：

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

Also notethat you would still need to include bootstrap.min.jsfor usage of Bootstrap JavaScript components, see Bootstrap CDNfor url.

另请注意，您仍然需要包含bootstrap.min.jsBootstrap JavaScript 组件，请参阅Bootstrap CDN以获取 url。

If you want to use the Glyphicons separately, you can do that by directly referencing the Glyphicons css on Bootstrap CDN.

如果您想单独使用 Glyphicons，您可以通过直接引用Bootstrap CDN上的 Glyphicons css 来实现。

In html:

在 HTML 中：

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

In css:

在 CSS 中：

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

Since the cssfile already includes all the needed Glyphicons dependencies (which are in a relative path on the Bootstrap CDN site), adding the cssfile is all there is to do to start using Glyphicons.

由于该css文件已经包含所有需要的 Glyphicons 依赖项（它们位于 Bootstrap CDN 站点的相对路径中），添加css文件就是开始使用 Glyphicons 所需要做的全部工作。

Here is a working demoof the Glyphicons without Bootstrap.

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

回答by Ionic? Biz?u

An alternative would be to use Font-Awesomefor icons:

另一种方法是将Font-Awesome用于图标：

Including Font-Awesome

包括字体真棒

Open Font-Awesome on CDNJSand copy the CSS url of the latest version:

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

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

Or in CSS

或者在 CSS 中

@import url("<url>");

For example (note, the version will change):

例如（注意，版本会改变）：

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

Usage:

用法：

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

It contains a lot of icons!

它包含很多图标！

回答by trante

Although Bootstrap CDN restored glyphicons to bootstrap.min.css, Bootstrap CDN's Bootswatch css files doesn't include glyphicons.

尽管 Bootstrap CDN 将字形恢复到 bootstrap.min.css，但 Bootstrap CDN 的 Bootswatch css 文件不包含字形。

For example Amelia theme: http://bootswatch.com/amelia/

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

Default Amelia has glyphicons in this file: http://bootswatch.com/amelia/bootstrap.min.css

默认 Amelia 在此文件中有字形：http://bootswatch.com/amelia/bootstrap.min.css

But Bootstrap CDN's css file doesn't include glyphicons: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

但是 Bootstrap CDN 的 css 文件不包含字形：http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

So as @edsioufi mentioned, you should include you should include glphicons css, if you use Bootswatch files from the bootstrap CDN. File: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

因此，正如@edsioufi 所提到的，如果您使用引导 CDN 中的 Bootswatch 文件，则应该包含您应该包含 glphicons css。文件：http: //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

回答by Dipen

If you only want to have glyphicons icons without any additional css you can create a css file and put the code below and include it into main css file.

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

I have to create this extra file as link below was messing with my site styles too.

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

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

Instead to using it directly I created a css file bootstrap-glyphicons.css

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

@font-face{font-family:'Glyphicons Halflings';src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"a";}
.glyphicon-plus:before{content:"b";}
.glyphicon-euro:before{content:"ac";}
.glyphicon-minus:before{content:"12";}
.glyphicon-cloud:before{content:"01";}
.glyphicon-envelope:before{content:"09";}
.glyphicon-pencil:before{content:"0f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-user:before{content:"\e008";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-earphone:before{content:"\e182";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"f4bc";}
.glyphicon-calendar:before{content:"f4c5";}
.glyphicon-pushpin:before{content:"f4cc";}
.glyphicon-paperclip:before{content:"f4ce";}
.glyphicon-camera:before{content:"f4f7";}
.glyphicon-lock:before{content:"f512";}
.glyphicon-bell:before{content:"f514";}
.glyphicon-bookmark:before{content:"f516";}
.glyphicon-fire:before{content:"f525";}
.glyphicon-wrench:before{content:"f527";}

And imported the created css file into my main css file which enable me to just import the glyphicons only. Hope this help

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

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

相关推荐

Html 如何在没有边距的情况下将按钮与文本框的右侧对齐？

Html 如何在没有边距的情况下将按钮与文本框的右侧对齐？

Html 如何不验证具有必需属性的 HTML5 文本框

Html 如何不验证具有必需属性的 HTML5 文本框

Html 如何在不使内容（图像和文本）也透明的情况下使我网站的背景透明？

Html 如何在不使内容（图像和文本）也透明的情况下使我网站的背景透明？

Html 将 HTML5 画布转换为 SVG 的方法？

Html 将 HTML5 画布转换为 SVG 的方法？

相关推荐
最近更新
标签