Bootstrap 3.2.0 字形不显示

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>

这是我得到的结果：

知道我做错了什么吗？

Answer 1

您忘记包含最新 bootstrap css 样式。

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

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

Answer 2

我觉得不错。您是否包括最新的 bootstrap CSS（当前为 3.3.5）？

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

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

这是一个 fiddle 显示它正在工作：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 文件设置我们的方式上。 bootstrap 中的 css 向上查找一个文件夹（文件所在目录的父目录）中的字体。

这是bootstrap个文件的设置。根据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 文件以指向您的字体文件的路径

Bootstrap 3.2.0 字形不显示

Bootstrap 3.2.0 glyphicons not showing

html

twitter-bootstrap

glyphicons

twitter-bootstrap-3