reactjs中离线使用font-awesome图标

￡神魔★判官ぃ 2022-05-29 06:44 216阅读 0赞

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

解决：

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

title={<span><i className="iconfont">3</i><span style={
       {fontSize:'16px'}}>{v.txt}</span></span>}>3</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.html文件的同级目录下新建文件夹fonts，将字体文件放入该文件夹。

（4）

npm install react-fontawesome --save

（5）在使用到图标的文件中添加font-awesome：

import FontAwesome from 'react-fontawesome';

（6）使用：

<SubMenu key={v.id}
         title={<span><FontAwesome name={v.icon} style={
       {paddingRight:"5px"}}/><span style={
       {fontSize:'16px'}}>{v.txt}</span></span>}>
            {
              v.child.map(v2 => {
                  return <Menu.Item key={v2.sref} style={
       {fontSize:'13px'}}>
                      <Icon type={v2.icon}/>
                       <span>{v2.name}</span>
                       </Menu.Item>
               })
             }
    </SubMenu>

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 ant design vue fontAwesome 图标选择器

基于fontAwesome进行封装 -------------------- 效果展示 -------------------- ...

电玩女神/ 2024年04月19日 13:25/ 0 赞/ 90 阅读

相关 Vue项目中使用fontawesome5

1. 下载fontawesome5，官网地址：[fontawesome5][] 2. 把下载的fontawesome-free-5.11.2-web文件夹复制到src目录下

￡神魔★判官ぃ/ 2023年07月08日 02:41/ 0 赞/ 13 阅读

相关 QML中使用FontAwesome字体图标

0.前言 FontAwesome是一套可免费使用的字体图标库，官网介绍： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

怼烎@/ 2022年10月29日 09:16/ 0 赞/ 353 阅读

相关 ESP32 开发笔记(四）littleVGL LVGL学习使用lv_font_conv离线工具 Font字体 FontAwesome图标字体的使用

前言先看效果，段式数码字体没选择好^\_^。屏幕上这些全是字体，包括图标 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

比眉伴天荒/ 2022年10月27日 15:58/ 0 赞/ 1107 阅读

相关 iOS开发- 巧用FontAwesome(图标,字体)

首先,先介绍一下FontAwesome。 Font Awesome 是为 Twitter [Bootstrap][] 设计的图标字体。通过Web Font的方式来显示一些图标

忘是亡心i/ 2022年08月25日 14:42/ 0 赞/ 266 阅读

相关 FontAwesome图标制作（css）

刚看了关于FontAwesome 的教程，发现可以使用这个做出很多图标，省下了切图的功夫。 css的链接地址：http://fontawesome.io/assets/fon

超、凢脫俗/ 2022年08月04日 13:54/ 0 赞/ 346 阅读

相关在 Windows Forms 和 WPF 应用中使用 FontAwesome 图标

前言 FontAwesome 大家都不陌生，精美的图标，出现在各式各样的网页中。最近在做 Windows Forms 应用程序，要求美观，就想能不能把 FontAw

ゝ一世哀愁。/ 2022年07月11日 07:57/ 0 赞/ 183 阅读

相关 reactjs中离线使用font-awesome图标

问题描述：使用reactjs+redux+antd搭建的前端框架，部署在内网之后发现图标丢失。解决： 1、尝试将antd的图标本地化，虽然本地化成功，但是图标无法实现动

￡神魔★判官ぃ/ 2022年05月29日 06:44/ 0 赞/ 217 阅读

相关 FontAwesome 字体图标库使用

Intro Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

灰太狼/ 2022年01月30日 11:01/ 0 赞/ 498 阅读

相关 FontAwesome图标字体库和CSS框架

1、CSS框架简介 Font Awesome是一套绝佳的图标字体库和CSS框架，为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色

系统管理员/ 2021年09月02日 05:59/ 0 赞/ 582 阅读