react使用字体图标iconfont

最新推荐文章于 2025-11-22 03:21:49 发布
原创 最新推荐文章于 2025-11-22 03:21:49 发布 · 1.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react #styled-components #iconfont #字体图标

本文详细介绍如何在React项目中使用Iconfont图标，包括创建项目、添加图标、下载及配置图标资源，以及如何通过react的styled-components插件来正确引入和使用图标。

react使用字体图标iconfont

  1. 第一步，进入到iconfont官网，选择图标管理进入我的项目，点击右上角的+号创建自己的项目；
    在这里插入图片描述
  2. 创建完项目后可以去搜索自己想要的的图标，然后点击添加至购物车；

在这里插入图片描述

  1. 点击左上角的购物车就可以看见自己的图标，然后点击将图标加入自己的项目。
    在这里插入图片描述
  2. 到我的项目下载图标至本地并解压，选择其中这几个文件
    在这里插入图片描述
  3. 将这几个文件放到自己项目中的statics文件夹中，打开iconfont.js 文件夹删掉里面的其他东西，然后利用react的styled-components插件引入图标，首先是先下载依赖
    npm install --save styled-components
    依赖安装完成之后在icon font中引入并使用
    在这里插入图片描述
    然后修改其中的font-face中的一些内容，将url和src的路径改为相对路径，
    删除下面的iconfont图标css。
    在这里插入图片描述
  4. 然后在项目的入口文件引用
    5.
  5. 最后使用
 <i className='iconfont'>&#xe62a;</i>

补充，可以打开下载的文件中的index.html文件获取
在这里插入图片描述

React图标库: 使用React Icons实现定制化图标效果
pingguocu3的博客
12-21 933
React Icons可以让开发者在React应用中轻松地添加、定制各种图标，提供了丰富的API，方便开发者使用和管理图标库。通过React Icons，我们可以方便地在React应用中使用各种图标，并且可以通过API实现对图标的定制化效果，满足项目中不同的设计需求。除了简单地引入使用现有的图标外，React Icons还提供了一些API来实现图标的定制化效果，比如改变图标的颜色、大小、样式等。上述代码中，我们通过style属性设置了图标的颜色为红色，字体大小为2em，从而实现了对图标的定制化效果。
在React中使用动态图标
曲折旅程，艰难人生
12-12 1196
react 图标
终极指南：如何用React Hooks简化React Icons图标使用体验
最新发布
gitblog_00699的博客
11-22 706
React Icons是一个功能强大的React图标库，它集成了超过30个流行图标包的SVG图标，包括Font Awesome、Material Design、Ant Design等。通过结合React Hooks，你可以创建自定义Hook来简化图标使用，提升开发效率。✨ ## 为什么选择React Icons？ React Icons采用SVG格式，相比传统字体图标具有诸多优势： - **
icons:React的默认图标库
05-09
默认图标库 React的默认图标库。 :motorcycle:安装 npm： npm install @default-services/icons 纱： yarn add @default-services/icons :laptop:使用 默认图标库包括几个基本图标，可帮助您入门，并允许您传递诸如以下的道具： onClick ， className和大多数其他样式和事件处理帮助。 import React from 'react' ; import { CheckIcon } from '@default-services/icons/solid' ; const MyComponent = ( props ) => { return ( < div> < CheckIcon> < / div > ) ; } ; 提示：请注意，在上面的示例中，图标从其相应的文件“
[react] 在React中怎么使用字体图标？
歌谣的博客
11-21 737
[react] 在React中怎么使用字体图标？ 1、npm install --save react-fontawesome 2、npm install font-awesome 3、import ‘font-awesome/less/font-awesome.less’; 4、import ‘react-fontawesome’; 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
react项目字体图标，fontawesome配置
weixin_62902737的博客
03-29 365
官网：https://fontawesome.com/docs/web/use-with/react/
React 实战 | react项目使用图标iconfont
qq_35536883的博客
07-16 4947
Iconfont平台 iconfont平台是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 如何引入React项目中 1.打开Iconfont官网，进入项目页面 ## 1.点击》下载至本地》解压文件夹 3.在项目src文件夹下创建static文件...
ReactNative 使用Iconfont字体图标的方式总结（安卓）
mengxianglong123的博客
01-29 3542
一、使用<Text/>直接引入 这种方式比较直接，也是最简单的方式，十分推荐使用该方式 在iconfont下载自己的项目 然后拷贝 ttf后缀的文件到 android\app\src\main\assets\fonts中 如果没有assets文件夹可以新建一个 关于assets文件夹：https://www.jianshu.com/p/35db9e819a54 字体文件名是不能随便更改的，文件名要与fontFamily保持一致：https://blog.youkuaiyun.com/aiyn
精选资源
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： ...4.在终端使用以下命令，建立图标的联系 react-native link 5.使用方式 //字
react项目如何使用iconfont的方法步骤
12-08
在React项目中集成Iconfont图标库，可以提升项目的可维护性和图标的一致性。下面将详细阐述这个过程，包括配置项目、创建组件以及使用图标。 ### 配置项目 1. **选择图标类型**：Iconfont 提供了两种使用方式，...
React 中引入字体图标
qq_40924034的博客
12-10 726
React Icons：一站式React图标解决方案
gitblog_00021的博客
03-19 1962
React Icons：一站式React图标解决方案 【免费下载链接】react-icons svg react icons of popular icon packs 项目地址: https://gitcode.com/gh_m...
react中图标的使用
09-17 2005
图标库的种类 这里我们介绍2种：阿里图标库、font-Awesome font-Awesome的使用方法 1、去font-Awesome官网（http://www.fontawesome.com.cn/）下载font-Awesome文件夹 2、 将文件夹放到项目的public中 3、在index.html的head标签中加上 <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css"> 4、使用时直接写 <i
在react中使用iconfont
MFWSCQ的博客
10-31 6398
一、基本使用 我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下： 1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件 <link rel="stylesheet" href="./iconFont/iconfont.css"> 2.在h...
react native 使用阿里字体图标库
好巧的博客
08-30 1391
注：手动链接(react-native link)已从 react-native 0.69 中删除，以支持自动链接功能，需使用另外一个插件react-native-asset。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。将iconfont图标文件放置在src/assets/fonts。根目录新建 react-native.config.js。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
react 中 iconfont 简单使用
mhbsoft的博客
04-20 1283
项目文件夹下新建iconfont 文件夹目录 下载的iconfont解压到 项目 iconfont文件夹目录下面 index.html 中引入 css文件 <link rel="stylesheet" href="./iconfont/iconfont.css"> 代码中如下使用： <span className="icon iconfont">&#xe6cf;&...
react项目里如何使用阿里字体图标
kilig
04-22 549
C程序结构 ： 一个C程序是由若干头文件和函数组成，如下例就是一个头文件和一个主函数组成。 #include <stdio.h> int main() { printf("Hello World!"); return 0; } ①stdio.h是系统提供的一个文件名,stdio是“standard input & output”的缩写，即标准输入输出;函数就是实现代码逻辑的一个小的单元。 ②主函数： 一个C程序函数有且只有一个主函数，即main函数。C程序就是执行主函
项目中使用 iconfont
小秀的博客
05-08 731
将一些样式放到项目中（此时我放入的是项目的全局 css 文件 index.css ），注意需要将 url 路径修改为相对路径。将 ttf 字体文件添加到项目的某个文件夹（这里我的文件夹是 font）内。添加购物车，下载代码，解压。
React Native中自定义与使用字体图标的方法详解
- 在这里，`@iconfont`可以视为React Native中使用自定义字体图标的占位符或引用，实际上指的是那些在字体文件中定义的图标。 - 在开发中，我们通常会使用图标的名称来引用特定的图标，例如`'home'`、`'user'`、`'...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值