2017-11-10 7 views
6

プレースホルダーにfontawesomeを入れる方法。ここに私のコードは次のとおりです。あなたはこの試みることfontawesomeのユーザープレースホルダー

<div class="form-group">   
    <input class="form-control" placeholder="username" id="inputdefault" type="text" /> 
    <input class="form-control" placeholder="password" id="inputdefault" type="text" /> 
</div> 
+0

を可能な回避策https://stackoverflow.com/a/36808965/2375207 – nicolallias

答えて

3

この方法試してみてください:

input { 
 
    padding:10px; 
 
\t font-family: FontAwesome; 
 
    
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<form role="form"> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xf2ba"> 
 
    </div> 
 
</form>

+0

私はそれが箱だけ – Ephraim

+0

をインポートする必要があります@エフライムだけあなたのフォント素晴らしいライブラリが含まれる必要が予想されます。ここで私はフォントの素晴らしいCDNリンクを含んでいます。それでおしまい。 – Ephraim

+0

を示して何か – nabanita

0

/* add the font to the input element*/ 
 

 
input { 
 
    font: normal normal normal 14px/1 FontAwesome; 
 
    font-size: inherit; 
 
    text-rendering: auto; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<!-- add the code of the icon in the placeholder--> 
 
<input class="form-control" placeholder="&#xF002;" id="inputdefault" type="text">

をあなたはhere

0
<input type="text" class="form-control" placeholder="&#xF002;" id="inputdefault" style="font-family:Arial, FontAwesome" /> 

は、16進コードのリストを見つけることができるコードを見つけることができますFont Awesome cheatsheet