Font Awesome 6.2.1中regular版magnifying-glass-dollar图标无法加载求助
解决Font Awesome 6.2.1中magnifying-glass-dollar regular版无法显示的问题
1. 先确认图标是否属于免费资源
首先要明确:magnifying-glass-dollar的regular风格图标,在Font Awesome 6.2.1的免费版本中是否存在。部分regular图标仅Pro版本提供,如果你用的是免费下载包,自然加载不了。可以直接查看本地webfonts文件夹,是否有fa-regular-400.woff2/woff/ttf这类文件,且该字体文件包含目标图标。
2. 手动补全Regular字体的CSS引用
如果确认该图标属于免费版,但all.css没有正确加载对应的字体资源,可以手动添加字体声明:
@font-face { font-family: 'Font Awesome 6 Regular'; font-style: normal; font-weight: 400; /* 注意路径要和你的webfonts文件夹位置匹配 */ src: url('../webfonts/fa-regular-400.woff2') format('woff2'), url('../webfonts/fa-regular-400.woff') format('woff'), url('../webfonts/fa-regular-400.ttf') format('truetype'); } .far { font-family: 'Font Awesome 6 Regular'; font-weight: 400; }
使用图标时,确保用far类:
<i class="far fa-magnifying-glass-dollar"></i>
3. 用CSS模拟regular效果(若图标为Pro专属)
如果查下来该regular图标是Pro版本专属,又不想升级或引入JS,可以用solid版配合CSS模拟视觉效果:
/* 模拟regular的细线条样式 */ .fa-magnifying-glass-dollar.far-mock { color: transparent; -webkit-text-stroke: 1px #333; text-stroke: 1px #333; }
使用时:
<i class="fas fa-magnifying-glass-dollar far-mock"></i>
4. 检查本地资源完整性
重新确认下载的Font Awesome 6.2.1包是否完整,webfonts文件夹下的fa-regular-400系列文件是否存在且未损坏。如果文件缺失,重新下载完整的免费包覆盖现有文件。
内容的提问来源于stack exchange,提问作者MrGreen
相关产品推荐
相关产品推荐

