Font Awesome 图标未显示在选择框中

Question

我正在创建一个前端项目，但我的图标没有显示在 UI 中。我尝试了  代码并将我的 select 字体系列设置为 'Font Awesome 5'，但是，它没有再次显示。

select {
  font-family: 'FontAwesome 5 Free', 'sans-serif';
}

@font-face {
  font-family: "FontAwesome 5 Free";
  src: url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
}

<select>
  <option value="public">Hi, &#xf0ac;</option>
</select>

我也试过 'FontAwesome' 而不是 'FontAwesome 5 Free'。不过没用。

Answer 1

您是否知道 eot 字体格式仅受 Internet Explorer 支持？

您应该嵌入 woff/woff2 版本。

一旦我在 CDN URL 中将 eof 更改为 woff 或 woff2，您从中加载字体，它在我基于 Chromium 的系统中工作正常浏览器 - https://jsfiddle.net/bwj04qr2/

select {
  font-family: 'FontAwesome 5 Free', 'sans-serif';
}

@font-face {
  font-family: "FontAwesome 5 Free";
  src: url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0");
}

<select>
  <option value="public">Hi, &#xf0ac;</option>
</select>

Font Awesome 图标未显示在选择框中

Font Awesome Icon Not Showing In Selectbox

html

css

font-awesome