bootstrap 3.2.0 glyphicons没有显示

Question

我正在尝试在文本框中显示glyphicons。

这是我的标记：

 <div class="form-group" style="width: 100%;" id="divFirstName" runat="server">
                                        <input type="text" placeholder="First Name" runat="server" id="txtFirstName" value="" aria-describedby="inputSuccess2Status" class="form-control" maxlength="30" />
                                        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
                                    </div>

这是我得到的结果：

知道我做错了什么吗？ 谢谢，Laziale

Answer 1

您忘记包含最新引导程序CSS样式。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

另外请确保您没有覆盖CSS中某处font-family图标的span属性。

Answer 2

由于您从本地服务器加载文件并且它们无法正常工作，因此问题来自您设置字体文件和css文件的方式。来自bootstrap的css查找一个文件夹向上的字体（文件所在的当前目录的父目录）。

这是bootstrap文件的设置。根据{{​​3}}。

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

如果您的文件没有这样设置，您可以修改css文件以指向字体文件的路径

Answer 3

对我来说很好看。你是否包括最新的bootstrap CSS（目前为3.3.5）？

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

此外，您必须将类has-feedback添加到表单组容器。

这是一个显示它正常工作的小提琴：https://jsfiddle.net/dnje3g1y/

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="form-group has-feedback" style="width: 100%;" id="divFirstName" runat="server">

<input type="text" placeholder="First Name" runat="server" id="txtFirstName" value="" aria-describedby="inputSuccess2Status" class="form-control" maxlength="30" />
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>

</div>