字体真棒unicode不显示答案

【问题标题】：font awesome unicode not displaying字体真棒unicode不显示
【发布时间】：2020-04-01 00:18:00
【问题描述】：

我有以下带有 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">&#xf002;</option>
      <option class="fa fa-equals" value="1">&#xf52c;</option>
      <option class="fa fa-not-equal" value="2">&#xf53e;</option>
      <option class="fa fa-spell-check" value="3">&#xf891;</option>
      <option class="fa fa-remove-format" value="4">&#xf87d;</option>
    </select>
  </div>
  <input class="form-control" type="text" name="textInput" />
</div>

https://jsfiddle.net/eliasvargasloyola/a76Lzu51/4/

可能是什么问题？

问候。

【问题讨论】：

尝试使用 font awesome 5.

标签： css twitter-bootstrap bootstrap-4 icons font-awesome

【解决方案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">&#xf002;</option>
      <option class="fa fa-equals" value="1">&#xf52c;</option>
      <option class="fa fa-not-equal" value="2">&#xf53e;</option>
      <option class="fa fa-spell-check" value="3">&#xf891;</option>
      <option class="fa fa-remove-format" value="4">&#xf87d;</option>
    </select>
  </div>
  <input class="form-control" type="text" name="textInput" />
</div>

【讨论】：

【解决方案2】：

尝试使用这个字体很棒的链接会帮助你：

 <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">&#xf002;</option>
          <option class="fa fa-equals" value="1">&#xf52c;</option>
          <option class="fa fa-not-equal" value="2">&#xf53e;</option>
          <option class="fa fa-spell-check" value="3">&#xf891;</option>
          <option class="fa fa-remove-format" value="4">&#xf87d;</option>
        </select>
      </div>
      <input class="form-control" type="text" name="textInput" />
    </div>

【讨论】：

【解决方案3】：

感谢大家的回答，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">&#xf002</option>
      <option value="1">=</option>
      <option value="2">&#x2260;</option>
      <option value="3">&#x2208;</option>
      <option value="4">&#x2209;</option>
    </select>
  </div> <input class="form-control" name="campingTXT" type="text">
</div>

https://jsfiddle.net/eliasvargasloyola/afx41zct/11/

【讨论】：