Bootstrap 3.2.0 glyphicons未显示

Question

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

这是我的标记：

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

这就是我得到的结果：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9pUjV0RC5wbmcifQ==” alt =“在此处输入图像描述”>

知道我在做什么错吗？

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（当前为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>

Answer 3

由于您正在从本地服务器加载文件，但它们无法正常工作，所以问题出在我们设置字体文件和CSS文件的方式上。引导程序中的css在向上一个文件夹（文件所在的当前目录的父目录）中查找字体。

这是引导文件的设置。据documentation。

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文件以指向字体文件的路径