fontawesome图标不显示竟然是版本太老了?
专栏:web开发笔记 Oct. 14, 2025, 6:37 p.m. 12 阅读
今天遇到fontawesome死活不显示问题

如下安装fontawesome库,并编写测试代码,然而图标不显示。

npm install font-awesome
<i class="fas fa-upload"></i>

经过查找资料发现了关键问题:font awesome版本不对。简单来说font awesome“4”与“5+”新老版本有很大差异。最新版本是7。

1、安装的库名字不一样。

4是npm install font-awesome,而新版本(5+)要用npm install @fortawesome/fontawesome-free

2、使用的css class名字也有变化。

4用class="fa fa-upload",而新版本(5+)要用class="fas fa-upload"

5+版本把图标按照类型(solid、regular、light、thin、brand等)分类,并且部分图标还收费,也不是所有图标都能用。具体可以在这里(https://fontawesome.com/search)查询是否可以免费用。带pro的都不免费。

image.png

感谢阅读,更多文章点击这里:【专栏:web开发笔记】
最新20篇 开设专栏