reactjs中离线使用font-awesome图标

shiyibodec

于 2018-03-19 15:51:33 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/shiyibodec/article/details/79612403

在内网环境下，使用reactjs+redux+antd的前端框架遇到图标丢失的问题。通过本地化antd图标尝试解决，但发现无法动态加载。最终选择使用Font-Awesome图标库来解决。步骤包括：下载font-awesome.min.css并引入到index.html，下载字体文件到fonts目录，然后在组件中引用Font-Awesome，并展示如何在代码中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：使用reactjs+redux+antd搭建的前端框架，部署在内网之后发现图标丢失。

解决：

1、尝试将antd的图标本地化，虽然本地化成功，但是图标无法实现动态加载，即无法实现根据后台返回的json自动加载图标：

title={<span><i className="iconfont">&#x33;</i><span style={
  
  {fontSize:'16px'}}>{v.txt}</span></span>}>&#x33;</i><span style={
 
 {fontSize:'16px'}}>{v.txt}</span></span>}>

<i>标签中的内容必须是特殊字符串，而不能是{v.icon}，这样就导致无法动态加载图标。（上一篇博客有介绍如何做）

(我错了，其实是可以的，直接使用<Icon>图标就可以实现动态加载，更改日期：2018-08-02，下面的内容就当是学习如何在react中添加font-awesome图标)

2、尝试使用font-awesome图标，成功。

（1）下载 font-awesome.min.css到本地，新建文件夹放到index.html同级目录

（2）在index.html中引用以上css文件：

<link rel="stylesheet" href="font-awesome.min.css">

（3）下载 fontawesome-webfont.woff2到本地，在index

最低0.47元/天解锁文章

200万优质内容无限畅学