Question

它正确地显示了字体真棒，但现在它没有，但没有任何改变。我尝试了很多解决方案，但似乎没有任何效果。我试图将其显示为占位符。

这是我的代码（HTML / CSS）：

＆＃13;

input {
  font-family: 'FontAwesome';
}

＆＃13;

<!-- included -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<input id="user" type="text" class="form-control" placeholder="username&#xf007;"/>

＆＃13;

有谁知道这个问题？提前谢谢！

Answer 1

显示空框，因为字符（）在Bootstrap的字体系列中不可用。要解决此问题，您必须覆盖Bootstrap的font-family。因此，您可以在!important规则上使用font-family，或者通过使用类来更具体地了解CSS规则本身：

input {
  font-family: sans-serif, 'FontAwesome'!important;
}
input.more-specific {
  font-family: sans-serif, 'FontAwesome';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!-- the input elements -->
<input id="user" type="text" class="form-control" placeholder="username &#xf007;"/>
<input id="user" type="text" class="form-control more-specific" placeholder="username &#xf007;"/>

您还可以将CSS类.fa设置为<input>，如下所示，这样您就不需要在<input>中添加额外的CSS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!-- input element -->
<input id="user" type="text" class="form-control fa" placeholder="username &#xf007;"/>

Answer 2

您在HTML文件中添加的以下行应加载FontAwesome。你有这个权利。超。：）

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

现在要修复字体真棒问题，请将输入框的标记更改为：

<div class="input-group mb-2 mb-sm-0">
  <div class="input-group-addon"><i class="fa fa-user"></i></div>
  <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
 </div>

希望这会有所帮助。：）

字体真棒显示空盒子

2 个答案: