为了账号安全,请及时绑定邮箱和手机立即绑定

Glyphicon图标无法显示问题?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <link href="../css/3.1.1/bootstrap.css" rel="stylesheet" />
</head>

文件地址肯定没有错,但是浏览器中显示不出icon:54c5e12800015f1300770228.jpg


以下是用于实现的代码:

            <form role="form">
                <div class="form-group has-warning has-feedback">
                    <label class="control-label" for="inputWarning2">警告状态</label>
                    <input type="text" class="form-control" id="inputWarning2" placeholder="警告状态">
                    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                </div>
                <div class="form-group has-error has-feedback">
                    <label class="control-label has-error has-feedback" for="inputError2">错误状态</label>
                    <input type="text" class="form-control" id="inputError2" placeholder="错误状态">
                    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                </div>
                <div class="form-group has-success has-feedback">
                    <label class="control-label has-success has-feedback" for="inputSuccess2">成功状态</label>
                    <input type="text" class="form-control" id="inputSuccess2" placeholder="成功状态">
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </form>



在学到了icon这一节时,又遇到了新的问题

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

,只正常显示了号plus和云图标cloud,如下图

54c637830001b65601230076.jpg

这要怎么解决? 


正在回答

7 回答

你的文件中有fonts文件夹吗。

2 回复 有任何疑惑可以回复我~
#1

Fire4x 提问者

有,4个文件,但还是不行,不过那个img文件夹下的2张icon的图片有用吗,应该放在哪个位置?
2015-01-26 回复 有任何疑惑可以回复我~
#2

Fiona0126 回复 Fire4x 提问者

还有img文件夹?你是在官网下的bootstrap吗?不是只有css.js,fonts文件夹?
2015-01-26 回复 有任何疑惑可以回复我~
#3

Fire4x 提问者 回复 Fiona0126

我有3个版本的Bootstrap,所以我想问问,我想应该用不到,imooc的例子都只是引用了bootstrap.min.css文件
2015-01-26 回复 有任何疑惑可以回复我~
#4

Fire4x 提问者 回复 Fire4x 提问者

<span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-arrow-right"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span> 只正常显示了加号plus和云图标cloud
2015-01-26 回复 有任何疑惑可以回复我~
#5

Fiona0126 回复 Fire4x 提问者

我觉得可能是fonts文件夹的问题。。我前几天也跟你一样= =。是我误删了fonts文件夹里的文件,你要不试试去官网下最新的看看?我后来又下的官网的,现在显示正常。。
2015-01-26 回复 有任何疑惑可以回复我~
#6

Fire4x 提问者 回复 Fiona0126

尝试了下,唯一成功的就是把我自己的路径<link href="../css/3.1.1/bootstrap.css" rel="stylesheet" />改成http路径<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css"> 不知道为什么会这样。。 而且我已经把bootstrap.css中的@font-face中的路径改成正确的了,还是不行。
2015-01-27 回复 有任何疑惑可以回复我~
#7

Fire4x 提问者 回复 Fiona0126

一般使用bootstrap推荐用自己的css还是cdn上的css网页文档,像这个http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css
2015-01-27 回复 有任何疑惑可以回复我~
#8

Fiona0126 回复 Fire4x 提问者

看看浏览器报错~可能是访问权限的问题?~我用linux的时候也有过~
2015-01-27 回复 有任何疑惑可以回复我~
#9

Fire4x 提问者 回复 Fiona0126

没有浏览器报错,用的是火狐
2015-01-27 回复 有任何疑惑可以回复我~
#10

Fire4x 提问者

暂时还是先用cdn上的css代替下吧,谢谢!
2015-01-27 回复 有任何疑惑可以回复我~
#11

MOLLMY 回复 Fire4x 提问者

我刚刚也遇到了这样的问题,看了你的提问受启发,发现是fonts下少了一个文件,后缀是woff2。因为现在编辑器里写的用的我自己下的bootstrap,然后再在idea改,是前辈的文件夹,一对比就发现少了,复制过去后就都显示了
2015-12-13 回复 有任何疑惑可以回复我~
#12

FianeHsu 回复 Fire4x 提问者

下载地址http://v3.bootcss.com/getting-started/#download
2016-07-22 回复 有任何疑惑可以回复我~
查看9条回复

最简单解决方案,希望能帮助后人:

        打开bootstrap.css源码,搜索“@font-face”按照里面src的要求存放相关文件,或者改下路径即可

1 回复 有任何疑惑可以回复我~

我也遇到了相同的问题,请问如何解决的呢@cz稻草人

0 回复 有任何疑惑可以回复我~

我也遇到这个问题
font文件无法被跨域调用
解决方法:将本地bootstrap3中的fonts文件(里面有glyphicons-halflings-regular)放到css同级,就是你的“STATIC/bootstrap3/”下

3 回复 有任何疑惑可以回复我~

我的图标也没有引用出来,跨域问题怎么解决?

0 回复 有任何疑惑可以回复我~
#1

cz稻草人

我也遇到这个问题 font文件无法被跨域调用 解决方法:将本地bootstrap3中的fonts文件(里面有glyphicons-halflings-regular)放到css同级,就是你的“STATIC/bootstrap3/”下
2015-05-15 回复 有任何疑惑可以回复我~

出现这样的问题有两个原因,第一个原因是字符编码存在问题,第二个问题是跨域问题。在使用font-face制作图片的时候,最大要考虑的就是跨域引起显示问题。如你上图所示的样子。

0 回复 有任何疑惑可以回复我~
#1

Fire4x 提问者

一般使用bootstrap搭建网站时,推荐用自己的css还是cdn上的css网页文档,像这个http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css
2015-01-27 回复 有任何疑惑可以回复我~

          

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

现在学到了icon这一节又遇到了新的问题,只正常显示了号plus和云图标cloud,这要怎么解决?    

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
玩转Bootstrap(基础)
  • 参与学习       314546    人
  • 解答问题       2275    个

告诉你使用Bootstrap,并且能够独立定制出适合自己的Bootstrap

进入课程

Glyphicon图标无法显示问题?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信