react项目中使用iconfont字体图标

最新推荐文章于 2024-07-03 21:57:01 发布

Ocean_HL

最新推荐文章于 2024-07-03 21:57:01 发布

阅读量3.2k

点赞数 1

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/bidang3275/article/details/117126196

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了如何将Iconfont图标库整合到项目中，包括复制字体图标文件、在index.js中引入样式、两种不同的使用方式（实体方式和类方式），以及实际效果的展示。通过这些步骤，开发者可以轻松地在项目中使用丰富的图标资源。

摘要由CSDN通过智能技术生成

1. 复制iconfont字体图标文件到项目中

在这里插入图片描述

2. 在index.js项目入口文件中引入inconfont.css文件

在这里插入图片描述

3. 使用iconfont方式：正常使用即可

# 实体方式：需要加iconfont样式基类
<i className="iconfont">&#xe60f;</i>

# 类方式：除了加iconfont样式基类外，还需要加对应的图标样式类名
<i className="iconfont icon-chufang"></i>

4. 效果展示

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ocean_HL

关注关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

React 实战 | react项目使用图标iconfont

qq_35536883的博客

07-16

4756

Iconfont平台 iconfont平台是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。如何引入React项目中 1.打开Iconfont官网，进入项目页面 ## 1.点击》下载至本地》解压文件夹 3.在项目src文件夹下创建static文件...

Iconfont 在 React-native中的使用

Flasco的个人博客

05-26

1944

相信很多人都已经用过了类似react-native-vector-icons这样的组件吧！但是在很多时候，我们会遇到诸如“怎么我需要的图标这个库里面找不到呀”，“我们自己的ui设计了一套图标怎么用起来呀”之类的问题。没错没错，这个时候我们就需要提到iconfont了！ iconfont，顾名思义，就是图标字体。它是将矢量图标做成字体，大大的减小了琐碎文件的个数，也方便了前端人员使用，而为大家所熟...

参与评论您还未登录，请先登录后发表或查看评论

React使用iconfont阿里巴巴矢量图库

qq_45634989的博客

11-14

1170

React使用iconfont阿里巴巴矢量图库

把 iconfont 的图标下载到 React 项目中使用

最新发布

weixin_48191864的博客

07-03

416

如果使用发现图标自带颜色，那么是因为图标本身是有颜色的，那么在通过 symbol 获取图标时会在 svg 的path 中增加 fill 属性，导致无法更改颜色，如果需要动态修改颜色，需要重新添加该图标(无色的图标)，两种方式修复这个问题 1）获取在 symbol 的 js 文件中程序删除 fill 属性，打开对应 js 文件，全局搜索 fill，删除对应的代码（代码示例：fill="#181818"） 2）去 iconfont 去色后生成新的 js 文件，使用新的 js 文件，3）点击购物车，添加到项目。

react 项目中使用 iconfont

小秀的博客

05-08

441

将一些样式放到项目中（此时我放入的是项目的全局 css 文件 index.css ），注意需要将 url 路径修改为相对路径。将 ttf 字体文件添加到项目的某个文件夹（这里我的文件夹是 font）内。添加购物车，下载代码，解压。

在react中使用iconfont

MFWSCQ的博客

10-31

6116

一、基本使用我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下： 1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件 <link rel="stylesheet" href="./iconFont/iconfont.css"> 2.在h...

react 使用iconfont 图标

一起学习前端知识，一起成为前端开发工程师！

10-12

2445

复制链接后，打开项目中的config->defaultSetting.ts将复制好的链接粘贴到iconfontUrl中。之后再进入routes.ts 页面，选择自己想要使用的图标，复制对应的代码，即可使用！

iconfont在react中的使用

lesswenniang的博客

04-23

267

https://www.cnblogs.com/qdjj/p/12420541.html

在react native中使用阿里iconfont图标

01-08

1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下：打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...

react项目如何使用iconfont的方法步骤

12-08

总结来说，React项目中使用Iconfont的主要步骤包括：配置Iconfont项目并获取CSS，创建`Icon.js`组件，可能需要创建`iconfont.less`文件以自定义样式，最后在项目中引入并使用`Icons`组件。这种方式使得图标管理和...

react native 使用图标字体(IconFont)

sharpdeng的博客

05-17

2977

前言今天在做react-native项目时，需要引入图形字体进行使用，但在网上找了很多资料，都是一知半解的，没有说完成，对于像我这样对小白来说很是难受，在经过n久，终于弄好了，现在进行总结一下，希望能给刚进坑的孩童提供帮助，也希望各位大神指点。正文图标字体（IconFont） IconFont，中文常被叫做图标字体或图形字体，是一种特殊的自定义字体，如果想要了解具体的内容，可以查看解密Ic...

react-iconfonts:一个React来智能地使用iconfont的项目

05-28

react-iconfonts 一个React智能地使用Iconfont的项目安装 $ npm i -S react-iconfonts import IconFont from 'react-iconfonts' 图标字体将您的图标（SVG）上传到您创建的图标项目，然后从 download.zip ，解压缩download.zip 。字体类将iconfont.css添加到您的项目 // Import css import './iconfont.css' 符号，Svg 将iconfont.js添加到您的项目 // import js import './iconfont.js' 警告：如果有什么不对的iconfont.js因为Eslint ，这个注释添加到第一线iconfont.js ： // eslint-disable-next-line no-unused-ex

react 中使用iconfont

weixin_33726943的博客

11-16

830

大前提是已经在iconfont有项目，并且有选中的图标一、选择新建项目二、搜索目标图标--并添加到购物车三、在购物车中将图标添加到项目四、出现三种类型，UnicodeFont classSymbo选中需要使用的类型，并生成相应的css，或者js代码将生成的代码在浏览器中打开，复制然后写入单独的css文件或者js文件。五、将js或者css文件（这里以js为例子）引入到项目中六、在项目中使用，这里是在...

react 使用 iconfont

weixin_30781433的博客

08-05

284

【react】---react项目中如何使用iconfont 转载：https://www.cnblogs.com/nanianqiming/p/11273603.html Alley巷子注意：页面上不能显示字体图片了，而是直接显示字体编码原因是字体编码后面四位是Unicode编码，想使用字符串来传递的话,只要将 "" 改为 “\ue655” ...

react项目中如何引入iconfont图标

benbihuwang的博客

12-19

527

6.使用时也是iconfont1 <span className={`iconfont1 ${item.iconName}`}></span>2.再global.css引入css文件 @import url('../public//fonts//bimdosIcon//iconfont.css');也要修改类名为iconfont1 且修改font-family: "iconfont1"!}中 font-family: "iconfont1";

react使用iconfont

喜兴

01-13

693

react使用iconfont 1.下载iconfont 文件 2.在react的入口文件 index.jsx 或者 app.jsx添加引入 index.jsx + import '../src/assets/iconfont/iconfont.css'; 3.在这里插入代码片 unicode: <i className="iconfont"><...

react 中 iconfont 简单使用

mhbsoft的博客

04-20

1200

项目文件夹下新建iconfont 文件夹目录下载的iconfont解压到项目 iconfont文件夹目录下面 index.html 中引入 css文件 <link rel="stylesheet" href="./iconfont/iconfont.css"> 代码中如下使用： <span className="icon iconfont">&...

react页面使用iconfont

05-24

要在React页面中使用Iconfont，您需要完成以下步骤： 1.在您的React项目中安装Iconfont的CSS库和字体文件。 2.导入所需的Iconfont图标。您可以在Iconfont网站上选择所需的图标，然后将其添加到购物车中并下载。 3.在React组件中引用所需的图标。您可以使用Unicode字符或CSS类名来引用它们。例如，以下是一个简单的React组件，它使用了一个名为"icon-home"的Iconfont图标： ```js import React from "react"; import "./iconfont.css"; const HomeIcon = () => { return ( <div> <i className="iconfont icon-home"></i> </div> ); }; export default HomeIcon; ``` 在这个例子中，我们首先导入Iconfont的CSS文件，并在组件中使用CSS类名"icon-home"来引用所需的图标。最后，我们将这个图标包装在一个<div>元素中并将其导出为一个组件。希望这可以帮助您在React项目中使用Iconfont图标！