Bootstrap 3 Glyphicons不起作用

rquis 发布于 2019-03-31 glyphicons 最后更新 2019-03-31 20:32 153 浏览

我下载了bootstrap 3.0,无法使用图形工作。我得到某种“E003”错误。任何想法为什么发生这种情况?我在本地和在线都尝试过,但仍然遇到同样的问题。

已邀请:

xest

赞同来自:

您必须按此顺序设置:

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

gcum

赞同来自:

我遇到的问题涉及Mac / PC转换。我收到了MAc开发人员的模板,其中包含图像,字体,字形和其他您能想到的内容。将文件加载到PC时可以看到问题。默认情况下,文件名将为绿色。这意味着它们不起作用。您将获得包含损坏链接的原始HTML。 这是快速修复。压缩收到的所有文件,并将它们解压缩到另一个文件夹中。所有文件名现在都是黑色的,并且可以完美地运行。 祝你好运。

eea

赞同来自:

您必须按此顺序设置:

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

taut

赞同来自:

以前的答案都不适合我.... 问题是我正在尝试<span class="icones glyphicon glyphicon-pen"> 一小时后我意识到这个图标不包含在Bootstrap包中!虽然信封图标工作正常..

svelit

赞同来自:

我使用VS2015,ASP.NET MVC 6(RC),并且在生产中使用gliphicons(在VS(开发)中工作)也遇到了问题(错误信息到参考,图标未显示)。
原因似乎是,MS cdn页面已关闭(至少现在和来自瑞士): http://www.websitedown.info/ajax.aspnetcdn.com 因此(作为临时解决方法),我已将_Layout.cshtml中的外部引用(在环境名称=“暂存,生产”下)更改为“内部”引用:
从:

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"
完成后,它再次工作。

wearum

赞同来自:

我修改了less less.less文件 我修改了变量

@icon-font-path:          "fonts/";    
原来是
@icon-font-path:          "../fonts/"; 
这引起了一个问题

fharum

赞同来自:

这就是为什么图标没有显示给我的原因:

* {
    arial, sans-serif !important;
}
在我删除了我的CSS的这一部分后,一切都按照应有的方式进行。重要的是导致麻烦的那个。

womnis

赞同来自:

如果你使用CDN作为bootstrap CSS文件,它可能是罪魁祸首,因为字形文件(例如glyphicons-halflings-regular.woff)也是从CDN中获取的。 在我的情况下,我使用Microsoft的CDN遇到了这个问题,但切换到MaxCDN解决了它。

dsit

赞同来自:

这是您在bootstrap 3中包含图标的方式

<span class="glyphicon glyphicon-bell"></span>
http://glyphicons.bootstrapcheatsheets.com/ 希望有所帮助。

gut

赞同来自:

如果其他解决方案不起作用,您可能希望尝试从外部源导入Glyphicons,而不是依靠Bootstrap为您执行所有操作。去做这个: 您可以在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")
感谢edsiofi来自这个帖子:Bootstrap 3 Glyphicons CDN

mnatus

赞同来自:

正如@Stijn所述,从Nuget安装此软件包时,Bootstrap.css中的默认位置不正确。 将此部分更改为如下所示:

@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');
}

ut_et

赞同来自:

以下是关于不渲染字体的官方文档。

Changing the icon font location Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways: Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Utilize the relative URLs option provided by the Less compiler. Change the url() paths in the compiled CSS. Use whatever option best suits your specific development setup.
除此之外,你可能错过了将fonts文件夹复制到根目录

wsed

赞同来自:

检查它是否为glyphicons-halflings-regular.woff而不是glyphiconshalflings-regular.woff

xatque

赞同来自:

我不得不创建一些重写条件来允许它们:

RewriteCond %{REQUEST_URI} !(^.+\.ttf)
RewriteCond %{REQUEST_URI} !(^.+\.eot)
RewriteCond %{REQUEST_URI} !(^.+\.svg)
RewriteCond %{REQUEST_URI} !(^.+\.woff)

menim

赞同来自:

  • 如果您遵循最高评级的答案,它仍然无法正常工作: Font文件夹必须与CSS文件夹位于同一级别。修复bootstrap.css中的路径将不起作用。 Bootstrap.css必须完全按照以下方式导航到Fonts文件夹:
    @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');
    }
    

jquia

赞同来自:

在Eclipse中使用Web片段时遇到此问题。打包到Web片段jar时,字体文件已损坏。 将字体文件复制到使用片段的项目可以解决问题。

uanimi

赞同来自:

您的fonts目录中是否包含以下所有文件?

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

amodi

赞同来自:

我刚刚使用Ctrl + c,Ctrl + v重命名了bootstrap.css中的字体,并且它工作正常。

modit

赞同来自:

它看起来像你的CSS中的UTF字符问题。只需使用new one更新您的bootstrap css文件。

ddolor

赞同来自:

如果您使用Visual Studio(2015,在我的情况下)创建ASP.NET Webforms Web应用程序,使用Bootstrap主题,默认情况下,glyphicons存储在项目根目录下的/ fonts文件夹中。 如果您开始将/ Content下的引导程序文件重新排列到子文件夹中(例如,支持多个主题),则bootstrap中../fonts/内的所有引用都将中断。您可以将fonts文件夹移动到/Content下的相应相对路径,或者将../fonts中的所有引用重命名为/fonts

fet

赞同来自:

默认情况下,IIS不会为.woff文件提供服务,因此在IIS中,您需要将<mimeMap>条目添加到web.config文件中;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

zsed

赞同来自:

注意:下面可能是一个利基场景,但我想分享它以防其他人可能发现它有用。 在rails项目中,我们使用bootstrap-sass重复使用作为Rails引擎的gem。除了glyphicon字体路径分辨率之外,所有在主项目中都很好。

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 
我们发现$bootstrap-sass-asset-helper在解决期间是false,当我们预期它是真的时,所以路径是不同的。 我们通过执行以下操作导致$bootstrap-sass-asset-helper在引擎gem中初始化:
// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";
例如这导致路径解决:
/assets/bootstrap/glyphicons-halflings-regular.woff
同样,在使用bootstrap-sass的任何普通rails项目中都不需要这样做,我们恰好重复使用了很多视图,这对我们来说很有用。希望这可以帮助别人。

edolor

赞同来自:

从那里下载完整/非自定义包,并用非自定义包字体替换您的字体文件。它将固定下来。

nnihil

赞同来自:

读者注意:请务必阅读有关定制器中的错误的@user2261073's comment@Jeff's answer。这可能是导致问题的原因。


字体文件未正确加载。检查文件是否在预期位置。
@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');
}
如Daniel所示,它也可能是一个mimetype问题。 Chrome的开发工具在网络标签中显示已下载的字体: chrome network tab font download

fnam

赞同来自:

例如,确保您没有指定字体系列

*{font-family: Verdana;}
将从i元素中删除halflings字体。

yet

赞同来自:

这是一个很长的拍摄,但这是我的情况,因为它已经不存在了。 如果您正在使用gulp-sassgrunt-sass编译来自SASS的Twitter Bootstrap,即。 node-sass。确保您的节点模块是最新的,特别是如果您正在处理一个相当旧的项目。 事实证明,在某些时候,SASS指令@at-root用于glyphicons中@font-face的定义,请参阅https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss。 这里的问题是node-sass即。 libsass如果太旧,则不支持@at-root指令。如果是这种情况,您将获得包含在@at-root中的@font-face,浏览器不知道如何处理。结果是没有下载任何字体,你可能会看到垃圾而不是图标。

comnis

赞同来自:

另一个问题/解决方案可能是使用此Bootstrap 2.x代码:

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
以及基于guide(.icon-* ---> .glyphicon .glyphicon-*)进行迁移时:
<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>
你忘记添加图标类(包含字体引用):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

mest

赞同来自:

我有这个问题,它是由variables.less文件引起的。覆盖它以设置icon-font-path值解决了问题。 结构化文件如下所示:

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less
在Content的根目录中添加我自己的variables.less文件并在styles.less中引用它解决了404错误。 Variables.less包含:
@icon-font-path:          "fonts/";

wsint

赞同来自:

这是由于bootstrap.css和bootstrap.min.css中的编码错误造成的。从定制程序下载Bootstrap 3.0时,缺少以下代码:

@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');
}
由于这是使用Glyphicons的主要代码,因此它不会起作用... 从完整包中下载css文件,将实现此代码。

ad_est

赞同来自:

我遇到了同样的问题,除了在本页隐藏的评论中找不到任何相关信息。根据Chrome,我的字体文件加载得很好,但图标显示不正常。我正在给这个答案,所以它有希望帮助别人。 我从Bootstrap 3的自定义工具下载的字体文件有问题。要获取正确的字体,请转到Bootstrap homepage并下载完整的.zip文件。从那里将四个字体文件解压缩到您的fonts目录,一切都应该有效。

adolor

赞同来自:

我从NuGet得到了Bootstrap。当我发布我的网站时,字形不起作用。 在我的情况下,我通过将每个字体文件的Build Action设置为'Content'并将它们设置为'Copy Always'来实现它。

ehic

赞同来自:

@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');}
我使用bootstrap与命名空间和glyphicons不工作,但在代码glyphicons上面添加上面的行工作正常。

stotam

赞同来自:

我正在使用Angular2和SCSS,作为我复制到我的项目的最佳实践,我正在修改另一个的bootstrap文件是从node_modules导入的..唯一的问题是Glyphicons。 经过多次尝试,我发现对我来说最好的解决方案是将字体文件复制到我的项目中,并将此路径直接设置为$ icon-font-path,如图所示: enter image description here

sest

赞同来自:

在我的情况下,我获得了404字形 - 半身 - regular.woff,以及移动浏览器上的非可见字形。 看起来有一些关于woff的MIME类型的混淆,不同浏览器接受多种MIME类型,但是W3C says

application/font-woff
编辑:在测试woff的以下MIME类型后,目前在所有浏览器上都有效:
application/x-font-woff
编辑:此时Bootstrap的最新版本(3.3.5)使用与.woff相同的初始结果的.woff2字体,W3C仍然是defining the spec,但目前MIME类型似乎是:
application/font-woff2

uanimi

赞同来自:

我遇到了同样的问题,浏览器无法找到字体文件,我的问题是由于我的.htaccess文件中的排除项,该文件将不应发送到index.php进行处理的白名单文件列入白名单。由于无法加载字体文件,因此将字符替换为BLOB。

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
如您所见,图像,rss和xml等文件从重写中排除,但字体文件是.woff.woff2文件,因此这些文件也需要添加到白名单中。
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
woffwoff2添加到白名单允许加载字体文件,然后可以正确显示字形。

eomnis

赞同来自:

对我有用的是取代以下路线:

@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');
}
@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');
}

oqui

赞同来自:

我有一个框宽度代码\ e094用于glyphicon-arrow-down,实际上我解决了在css类中添加glyphicon的问题:

<i class="glyphicon  glyphicon-arrow-down"></i>
如果它可以帮助某人......

ehic

赞同来自:

我也遇到了同样的问题,CSS很好,没有问题。 它还包含所有字体。 但是只有在我安装了“glyphicons-halflings-regular.ttf”之后才解决问题。我开始在UI上正确地获取图标。

rqui

赞同来自:

例如,如果您想要glyphicon-chevron-left的图标 尝试添加class="glyphicon glyphicon-chevron-left"

hquae

赞同来自:

Azure网站缺少woff MIME配置。您必须在web.config中添加以下条目

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

nrerum

赞同来自:

以下是为我修复它的原因。我在Firebug控制台中使用“错误的URI”错误。图标显示为E ###数字。我必须在'fonts'目录中添加一个.htaccess文件。 <FilesMatch ".(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> 可能重复:Downloadable font on firefox: bad URI or cross-site access not allowed

cet

赞同来自:

我正在仔细研究我的这个古老的问题,因为到目前为止应该是正确的答案,我在评论中给出了,我认为我也值得赞扬。 问题在于,从bootstrap的定制工具下载的glyphicon字体文件与从bootstrap主页上找到的重定向下载的glyphicon字体文件不同。那些正常工作的是可以从以下链接下载的那些:

http://getbootstrap.com/getting-started/#download
任何有旧的自定义程序文件问题的人都应该覆盖上面链接中的字体。

xsed

赞同来自:

这个答案适合任何使用南希(NancyFx)的人。 我有一个ASP.NET托管的NancyFX应用程序,我通过NuGet获得了Boostrap。 我的字形不起作用,但事实证明这不是一个坏字体文件,不正确的CSS相对目录路径或其他答案中提到的任何其他事情的问题。 问题是我错过了一个约定,告诉南希在哪里寻找内容。一旦我意识到这一点,解决方案就是将以下重载添加到我的bootstrapper文件中:

protected override void ConfigureConventions(NancyConventions nancyConventions)
{
    base.ConfigureConventions(nancyConventions);
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/fonts"));
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/Scripts"));
}