技术文章

Font Awesome 4.7 经典老版本图标用法与版本区别
技术文章 2026-08-03 25 阅读

Font Awesome 4.7 经典老版本图标用法与版本区别

超级管理员 本站 2026-08-03


⚠️ 重要版本坑(很多人图标显示问号根源) FA4:写法 fa fa-windows FA5/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 官网(新项目使用)

https://fontawesome.com/icons

搜索 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"> 一定会显示方框问号!

三、快速区分你的项目用哪个版本

  1. HTML引入CSS地址带 v4 → FA4,fa fa-xxx 正常

  2. 地址带 v5/v6/v7 → 新版,改用 fas/far/fab

四、补充小技巧

  1. 搜索关键词:只输入 windows,不要带 fa

  2. 国内打不开官网 → 使用上面的 uutool 中文镜像

  3. 如果你需要,我给你 FA4.7 稳定CDN链接直接放进网页

额外拓展常用同类图标

fa fa-windows(Windows) fa fa-android fa fa-apple fa fa-chrome fa fa-firefox



相关标签:

发表评论:

评论记录:

未查询到任何数据!
QQ咨询
回电话
回拨通话

我们稍后回拨您的电话

座机请加区号

微信联系
微信扫一扫
微信二维码

扫码加微信