PROSAGA码农传奇-Bootstrap-Bootstrap 3 Glyphicons无效

21 条回复

0#
回复此人
丫头 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我从NuGet获得了Bootstrap。当我发布我的网站时，字形不起作用。 </p> <P> 在我的情况下，我通过将每个字体文件的Build Action设置为'Content'并将它们设置为'Copy Always'来实现它。 </p> </DIV>

编辑
1#
回复此人
真不错 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是您在bootstrap 3中包含图标的方式 </p> <pre> <code> <span class="glyphicon glyphicon-bell"></span> </code> </pre> <P> <a href="http://glyphicons.bootstrapcheatsheets.com/" rel="nofollow"> http://glyphicons.bootstrapcheatsheets.com/ </A> </p> <P> 希望有所帮助。 </p> </DIV>

编辑
2#
回复此人
电动少女 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 例如，确保您没有指定字体系列 </p> <pre> <code> *{font-family: Verdana;} </code> </pre> <P> 将从i元素中删除halflings字体。 </p> </DIV>

编辑
3#
回复此人
猫南北 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');} </code> </pre> <P> 我使用bootstrap与命名空间和glyphicons不工作，但在代码glyphicons上面添加上面的行工作正常。 </p> </DIV>

编辑
4#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我有这个问题，它是由variables.less文件引起的。覆盖它以设置icon-font-path值解决了问题。 </p> <P> 结构化文件如下所示： </p> <pre> <code> \Content \Bootstrap \Fonts styles.less variables.less </code> </pre> <P> 在Content的根目录中添加我自己的variables.less文件并在styles.less中引用它解决了404错误。 </p> <P> Variables.less包含： </p> <pre> <code> @icon-font-path: "fonts/"; </code> </pre> </DIV>

编辑
5#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我正在仔细阅读我的这个老问题，因为到目前为止我应该给出正确的答案，我在评论中给出了这一点，我认为我也值得赞扬。 </p> <P> 问题在于这个问题的<strong> 从bootstrap的自定义工具下载的glyphicon字体文件与从bootstrap主页上找到的重定向下载的字体文件不同。 </强> 那些正常工作的是可以从以下链接下载的那些： </p> <pre> <code> http://getbootstrap.com/getting-started/#download </code> </pre> <P> 任何有旧的自定义程序文件问题的人都应该覆盖上面链接中的字体。 </p> </DIV>

编辑
6#
回复此人
陆离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对我有用的是取代以下路线： </p> <pre> <code> @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } </code> </pre> <P> 至 </p> <pre> <code> @font-face { font-family: 'Glyphicons Halflings'; src: url('/assets/glyphicons-halflings-regular.eot'); src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } </code> </pre> </DIV>

编辑
7#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 正如@Stijn所描述的那样，默认位置在 <code> Bootstrap.css </code> 安装此程序包时不正确 <code> Nuget </code> 。 </p> <P> 将此部分更改为如下所示： </p> <pre> <code> @font-face { font-family: 'Glyphicons Halflings'; src: url('Content/fonts/glyphicons-halflings-regular.eot'); src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } </code> </pre> </DIV>

编辑
8#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您必须按此顺序设置： </p> <pre> <code> <link rel="stylesheet" href="path/bootstrap.min.css"> <style type="text/css"> @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } </style> </code> </pre> </DIV>

编辑
9#
回复此人
荀彧. | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我修改了less less.less文件我修改了变量 </p> <pre> <code> @icon-font-path: "fonts/"; </code> </pre> <P> 原来是 </p> <pre> <code> @icon-font-path: "../fonts/"; </code> </pre> <P> 这引起了一个问题 </p> </DIV>

编辑
10#
回复此人
诸葛神侯 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 以下是为我修复它的原因。我在Firebug控制台中使用“错误的URI”错误。图标显示为E ###数字。我必须在我的'fonts'目录中添加一个.htaccess文件。 <code> <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> </code> 可能重复： <a href="https://stackoverflow.com/questions/15024333/downloadable-font-on-firefox-bad-uri-or-cross-site-access-not-allowed/15025681#15025681"> firefox上的可下载字体：不允许使用错误的URI或跨站点访问 </A> </p> </DIV>

编辑
11#
回复此人
土豆 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 另一个问题/解决方案可能是使用此Bootstrap 2.x代码： </p> <pre> <code> <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button> </code> </pre> <P> 当基于的迁移时 <a href="http://getbootstrap.com/getting-started/#migration-classes" rel="noreferrer"> 指南 </A> （ <code> .icon-* ---> .glyphicon .glyphicon-* </code> ）： </p> <pre> <code> <button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button> </code> </pre> <P> 你忘了添加图标类（包含字体引用）： </p> <pre> <code> <button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button> </code> </pre> </DIV>

编辑
12#
回复此人
google你他吗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以添加这行代码并完成。 </p> <pre> <code> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> </code> </pre> <P> 谢谢。 </p> </DIV>

编辑
13#
回复此人
啊这回彻底死了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我刚刚使用Ctrl + c，Ctrl + v重命名了bootstrap.css中的字体，并且它工作正常。 </p> </DIV>

编辑
14#
回复此人
Fire ming | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 注意：下面可能是一个利基场景，但我想分享它以防其他人可能发现它有用。 </p> <P> 在rails项目中，我们正在重复使用一个使用Rails引擎的gem <code> bootstrap-sass </code> 。除了glyphicon字体路径分辨率之外，所有在主项目中都很好。 </p> <pre> <code> GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) </code> </pre> <P> 我们发现了 <code> $bootstrap-sass-asset-helper </code> 是 <code> false </code> 在决议期间我们预计它是真的，所以路径是不同的。 </p> <P> 我们造成了 <code> $bootstrap-sass-asset-helper </code> 通过执行以下操作在引擎gem中初始化： </p> <pre> <code> // explicit sprockets import to get glyphicon font paths correct @import 'bootstrap-sprockets'; @import "bootstrap/variables"; </code> </pre> <P> 例如这导致路径解析为： </p> <pre> <code> /assets/bootstrap/glyphicons-halflings-regular.woff </code> </pre> <P> 同样，在使用的任何普通轨道项目中都不需要这样做 <code> bootstrap-sass </code> ，我们恰巧正在重复使用很多观点，这对我们来说很有用。希望这可以帮助别人。 </p> </DIV>

编辑
15#
回复此人
银角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 以下是关于不渲染字体的官方文档。 </p> <BLOCKQUOTE> 更改图标字体位置 Bootstrap假设图标字体文件将位于../fonts/目录中，相对于已编译的CSS文件。移动或重命名这些字体文件意味着以三种方式之一更新CSS：更改源Less文件中的@ icon-font-path和/或@ icon-font-name变量。利用Less编译器提供的相对URL选项。更改已编译CSS中的url（）路径。使用最适合您特定开发设置的选项。 </BLOCKQUOTE> <P> 除此之外，你可能错过了复制的<strong> fonts文件夹到根目录 </强> </p> </DIV>

编辑
16#
回复此人
谦逊的毛巾 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我有一个盒子宽度代码\ e094用于glyphicon-arrow-down，实际上我解决了添加的问题的<strong> glyphicon </强> 在css类中： </p> <pre> <code> <i class="glyphicon glyphicon-arrow-down"></i> </code> </pre> <P> 如果它可以帮助某人...... </p> </DIV>

编辑
17#
回复此人
天线宝宝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您的fonts目录中是否包含以下所有文件？ </p> <pre> <code> glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff </code> </pre> </DIV>

编辑
18#
回复此人
遇见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> IIS不会服务器 <code> .woff </code> 默认情况下是文件，所以在IIS中你需要添加一个 <code> <mimeMap> </code> 进入你的 <code> web.config </code> 文件; </p> <pre> <code> <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".woff" mimeType="application/x-woff" /> </staticContent> </system.webServer> </configuration> </code> </pre> </DIV>

编辑
19#
回复此人
SHOU宅大可爱 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是由于bootstrap.css和bootstrap.min.css中的编码错误造成的。从Customizer下载Bootstrap 3.0时，缺少以下代码： </p> <pre> <code> @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } </code> </pre> <P> 由于这是使用Glyphicons的主要代码，因此它不会起作用... </p> <P> 从完整包中下载css文件，将实现此代码。 </p> </DIV>

编辑

登录后才能参与评论