问答详情
源自：3-13 表单控件状态(验证状态)

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

这要怎么解决？ 


提问者：Fire4x 2015-01-26 14:39

个回答

  • Fiona0126
    2015-01-26 16:03:20
    已采纳

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

    2
  • 慕容2098772
    2018-01-17 22:45:55

    最简单解决方案，希望能帮助后人：

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

    1
  • qq_AriesOrPisce_0
    2015-10-21 15:51:08

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

    0
  • cz稻草人
    2015-05-15 17:42:23

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

    3
  • yangyang_0003
    2015-04-07 17:13:42

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

    0
  • w3cplus
    2015-01-27 10:31:49

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

    0
  • Fire4x
    2015-01-26 20:45:56

              

    <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