글꼴 Awesome 빈 상자 표시

Question

글꼴 Awesome이 제대로 표시되지만 지금은 변경되지 않지만 변경되지는 않습니다. 나는 많은 솔루션을 시도했지만 아무것도 작동하지 않는 것 같습니다. 그것을 자리 표시 자로 표시하려고합니다.

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

사람이 문제를 알고 있습니까 : 여기

내 코드 (HTML/CSS)인가? 미리 감사드립니다!

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> 

희망이 도움이됩니다. :)