我在Boostrap上有以下HTML代码。我正在尝试使用Font Awesome图标4.7.0填充列表。但是它仅显示第一个图标,其他图标则不显示。
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group" style="margin-bottom:9%">
<div class="input-group-append" style="width: 40%;">
<select class="form-control fa" name="selectableList">
<option class="fa fa-search" value="0"></option>
<option class="fa fa-equals" value="1"></option>
<option class="fa fa-not-equal" value="2"></option>
<option class="fa fa-spell-check" value="3"></option>
<option class="fa fa-remove-format" value="4"></option>
</select>
</div>
<input class="form-control" type="text" name="textInput" />
</div>
https://jsfiddle.net/eliasvargasloyola/a76Lzu51/4/
可能是什么问题?
致谢。
答案 0 :(得分:1)
尝试Font Awesome 5
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group" style="margin-bottom:9%">
<div class="input-group-append" style="width: 40%;">
<select class="form-control fa" name="selectableList">
<option class="fa fa-search" value="0"></option>
<option class="fa fa-equals" value="1"></option>
<option class="fa fa-not-equal" value="2"></option>
<option class="fa fa-spell-check" value="3"></option>
<option class="fa fa-remove-format" value="4"></option>
</select>
</div>
<input class="form-control" type="text" name="textInput" />
</div>
答案 1 :(得分:0)
尝试使用此字体很棒的链接将为您提供帮助:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group" style="margin-bottom:9%">
<div class="input-group-append" style="width: 40%;">
<select class="form-control fa" name="selectableList">
<option class="fa fa-search" value="0"></option>
<option class="fa fa-equals" value="1"></option>
<option class="fa fa-not-equal" value="2"></option>
<option class="fa fa-spell-check" value="3"></option>
<option class="fa fa-remove-format" value="4"></option>
</select>
</div>
<input class="form-control" type="text" name="textInput" />
</div>
答案 2 :(得分:0)
谢谢大家的回答,确实是User863提出的解决方案。
如果您无法更新Font Awesome版本,则可以使用unicode symbols来替代。
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group" style="margin-bottom:9%">
<div class="input-group-append" style="width: 35%;">
<select class="form-control fa" name="searchTypeCampaing" style="font-size: 18px;font-family: Arial, FontAwesome;font-weight: bold;">
<option class="fa fa-search" value="0"></option>
<option value="1">=</option>
<option value="2">≠</option>
<option value="3">∈</option>
<option value="4">∉</option>
</select>
</div> <input class="form-control" name="campingTXT" type="text">
</div>