Font Awesome 5：某些 unicode 不会在 html 选择中显示
[英]Font Awesome 5: some unicode won't display in html select
问题描述
I have a html select with 2 items, each one should show a FA icon, but only one of them works.
我有一个包含 2 个项目的 html 选择，每个项目都应该显示一个 FA 图标，但只有一个有效。 Both icons only have the "sold" version available FA5 free.这两个图标都只有“已售出”版本可用 FA5 免费。 Changing the font family to "Font Awesome 5 Free", did not help and then none of icons displayed.将字体系列更改为“Font Awesome 5 Free”没有帮助，然后没有显示任何图标。
<html> <head></head> <body> <style> select { font-family: 'FontAwesome'; } </style> <select style='font-weight: 900;'> <option> Broke</option> <option> Working</option> </select> <br/><br/> Code valid as this shows <i class='fas'></i><br/><br/> But displayed icons have the solid style as free and the other styles are pro only<br /> https://fontawesome.com/icons/graduation-cap?style=solid f19d<br /> https://fontawesome.com/icons/th-large?style=solid f009<br /> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/js/all.js" crossorigin="anonymous"></script> </body> </html>
Thanks in advance提前致谢
1 个解决方案
解决方案1
0 2020-01-22 14:59:44
You are using the JS+SVG method to load your icons so the one used inside the content <i class='fas'></i> will get transformed into an SVG.您正在使用 JS+SVG 方法加载您的图标，因此在内容<i class='fas'></i>中使用的图标将转换为 SVG。 The unicde inside the select aren't considered by this and will rely on the font-family: 'FontAwesome' which is the old version and the first icon you are trying to show exist only in the V5 (unlike the second one). select 中的 unicde 不在此考虑范围内，将依赖于font-family: 'FontAwesome' ，这是旧版本，您尝试显示的第一个图标仅存在于 V5 中（与第二个不同）。
To fix your issue, you need to load the CSS version and correct the font-family要解决您的问题，您需要加载 CSS 版本并更正font-family
select { font-family: 'Font Awesome 5 Free'; }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0-1/css/all.css"> <select style='font-weight: 900;'> <option> Broke</option> <option> Working</option> </select> <br/><br/> Code valid as this shows <i class='fas'></i><br/><br/> But displayed icons have the solid style as free and the other styles are pro only<br /> https://fontawesome.com/icons/graduation-cap?style=solid f19d<br /> https://fontawesome.com/icons/th-large?style=solid f009 <br />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.