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

Question

I am creating a front end project but my icons has not been displayed in UI. I tried &#xf0ac code and set my select font-family to 'Font Awesome 5', however, it has not been displayed again.

 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>

I also tried 'FontAwesome' instead of 'FontAwesome 5 Free'. It didn't work though.

Answer 1

Are you aware that the eot font format is only supported by Inte.net Explorer?

You should probably embed the woff / woff2 version.

As soon as I change eof to woff or woff2 in the CDN URL you are loading the font from, it works fine in my Chromium-based browser - 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>

Answer 2

I am creating a front end project but my icons has not been displayed in UI. I tried &#xf0ac code and set my select font-family to 'Font Awesome 5', however, it has not been displayed again.

 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>

I also tried 'FontAwesome' instead of 'FontAwesome 5 Free'. It didn't work though.