技术文章
2026-08-03
25 阅读
Font Awesome 4.7 经典老版本图标用法与版本区别
⚠️ 重要版本坑(很多人图标显示问号根源) FA4:写法
fa fa-windowsFA5/FA6/FA7:不再支持fa fa-xxx,品牌图标要写成fab fa-windows
一、查询网站(分官方/国内中文站,直接收藏)
1)Font Awesome 4.7 官方完整图标列表(匹配你 fa fa-xxx 格式)
✅ 原版FA4全部图标(你项目用这个!) https://epic.fontawesome.com/v4/icons/ ???? 顶部搜索 windows,直接复制类名 fa fa-windows
2)国内中文查询站(访问更快,一键复制)
FA4.7图标大全:https://fa.uutool.cn/icons/4.7.0/
3)新版 FA5 / FA6 / FA7 官网(新项目使用)
搜索 windows,代码是
<i class="fab fa-windows"></i>
二、版本语法巨大区别【一定要看懂!】
✅ Font Awesome 4(老项目、Bootstrap老模板通用)
<i class="fa fa-windows"></i>
<i class="fa fa-home"></i>
前缀固定:fa + fa-xxx
❌ Font Awesome 5 / 6 /7(新版,不能双fa)
分为三类:
普通实心图标:
fas fa-home线性空心:
far fa-home品牌图标(微信、Windows、github):fab fa-windows
<i class="fab fa-windows"></i>
你如果直接在FA6引入
<i class="fa fa-windows">一定会显示方框问号!
三、快速区分你的项目用哪个版本
HTML引入CSS地址带
v4→ FA4,fa fa-xxx正常地址带
v5/v6/v7→ 新版,改用fas/far/fab
四、补充小技巧
搜索关键词:只输入
windows,不要带fa国内打不开官网 → 使用上面的 uutool 中文镜像
如果你需要,我给你 FA4.7 稳定CDN链接直接放进网页
额外拓展常用同类图标
fa fa-windows(Windows) fa fa-android fa fa-apple fa fa-chrome fa fa-firefox