フォントAwesome空のボックスを表示

Question

Font Awesomeが正しく表示されていましたが、今は変更されていません。私は多くのソリューションを試してきましたが、何も動作していないようです。私はそれをプレースホルダとして表示しようとしています。ここで

は私のコード（HTML/CSS）です：

input { 
 
    font-family: 'FontAwesome'; 
 
}

<!-- 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;"/>

誰もが問題を知っていますか？前もって感謝します！

Answer 1

文字（）がブートストラップのフォントファミリで使用できないため、空のボックスが表示されます。この問題を解決するには、Bootstrapのフォントファミリを上書きする必要があります。だから、font-familyルールに!importantを使用するか、または例えば、クラスを使用してCSSルール自体に具体的にすることができます：あなたはまた、<input>のようにCSSクラス.faを設定することができ

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;"/>

以下のようにあなたが<input>にadditionaly 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> 

・ホープ、このことができます。 :)