iconFont的三种使用方法--Font class

最新推荐文章于 2025-06-18 17:09:56 发布
最新推荐文章于 2025-06-18 17:09:56 发布
阅读量8.3k 收藏 14
点赞数 4
CC 4.0 BY-SA版权
分类专栏： iconFont 文章标签： iconFont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Sweet_Waf/article/details/93224412
博客介绍了iconFont的使用方法，包括点击购物车添加至项目、更新代码并复制到项目中、在标签里引用类名。还提到了避免样式冲突的办法，即在项目中点击更多操作编辑项目，修改前缀，使用时类名对应即可。

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

iconFont的三种使用方法--Font class


打开 iconfont的官网，搜索你想要的图标，以“文件”为例

搜索文件
在这里插入图片描述
点击购物车添加至项目，点击确定。如果没有项目，新建一个即可
在这里插入图片描述
在这里插入图片描述
点击确定后会进入下面的界面
在这里插入图片描述
先更新代码 然后再复制到项目中去
在这里插入图片描述
在这里插入图片描述
复制到项目中
在这里插入图片描述
直接在标签里引用类名即可
在这里插入图片描述
在这里插入图片描述

如何避免样式冲突

一般我们在项目中定义的样式很容易冲突，如何避免呢？

  1. 在我的项目中点击更多操作->编辑项目在这里插入图片描述

  2. 点开编辑项目按钮弹出以下页面，图中是iconfont中默认值

在这里插入图片描述
修改前缀改成你想要的就可以

在这里插入图片描述

在用的时候类名对应上就可以
在这里插入图片描述

内容有点长，不过还是很详细的

Android中对Iconfont阿里图库的使用
Night_X的博客
06-23 865
文章目录下载喜欢的字体图标Android中对字体图标的使用 下载喜欢的字体图标 打开阿里图库的网站 网址在这里 如果没有账号，需要先创建账号并登录，以便后来下载字体用。 登录后，找到自己喜欢的字体图标，点击添加入库，然后点右上角的图标，添加至项目 如果之前没有创建过项目，需要先创建项目，然后点“确定”进入下一步。 然后点击下载到本地 将下载好的压缩包中的".ttf"文件放入A...
CSS | iconfont与@font-face
MGsniper的博客
01-14 1726
iconfont/webfont的原理问题场景@font-face@font-face简介注意点SVGSVG简介 问题场景 平时做一些练手项目，因为没有精力自己做UI，就会使用一些第三方开源的UI库的小图标。 像iconfont这样的网站提供给我们的图标并不是图片，而是字体，这背后的原理与历史究竟是什么呢？ 因为网上已经有一些现成的，总结得极好的文章了，所以这里以引用为主。 @font-face ...
iconfont字体图标的使用方法之Font class--超简单
六耳石猴的博客
08-03 5170
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;
Vue项目----iconfont图标的使用
最新发布
weixin_69889539的博客
06-18 1083
最后到此结束。想深入学习iconfont的小伙伴可以仔细专研一下前言中的文章。
iconfont图标Font class使用
weixin_45866961的博客
05-11 278
阿里巴巴矢量图iconfont图标Font class使用
iconfont图标使用-unicode-font-class字体图标-symbol
RealizeInnerSelf丶
06-26 2056
目录web端使用icon单个使用unicode引用第一步：拷贝项目下面生成的font-face第二步：定义使用iconfont的样式第三步：挑选相应图标并获取字体编码，应用于页面font-class引用第一步：拷贝项目下面生成的fontclass代码：第二步：挑选相应图标并获取类名，应用于页面：symbol引用第一步：拷贝项目下面生成的symbol代码：第二步：加入通用css代码(引入一...
iconfont的font-class方法
qq_46456369的博客
07-23 325
这次颜色很顺利的出来了
Hui-iconfont_v1.0.9.zip
05-01
在使用Hui-iconfont_v1.0.9时，开发者首先需要将字体文件引入到项目中，然后可以通过CSS的`content`属性或使用特定的类名来显示图标。例如，如果一个图标的Unicode编码是`\e600`，在CSS中可以这样写： ```css .icon...
2o3t-IconFont：[库] 2O3T-Icon-Font
02-04
【2O3T-IconFont】是一个专门设计的图标库，它将一系列矢量图形转换为Web字体，便于在网页设计中使用。这种技术被称为Icon Font，它允许开发者通过CSS来控制图标的大小、颜色、阴影等样式，与处理文本一样简单。与...
Vue-iconfont：优雅引入Iconfont.cn图标，支持font-class与symbol
在前端开发中，图标字体（iconfont）是一种常用的方法来表示各种图标和符号。它通过字体文件来实现图标的显示，具有可缩放、支持彩色、易于更换主题颜色等优点。Iconfont.cn 是一个流行的中文图标字体库，提供大量的...
iconfont的三种使用方式详解
01-19
在我们项目中经常要使用到iconfont，在此我们使用阿里巴巴矢量库提供的icon图标，此图标库足够为我们提供大量的图标，我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号，并且新建一个项目，这个项目包含了你...
iconfont的用法
一个小白的求知路
04-12 700
目前我已知有两种获取iconfont的方法，1.使用阿里的iconfont库获取 2.使用在线生成工具 首先介绍阿里的 阿里iconfont库 进入之后选择你想要的icon，然后把他添加到你的项目中，选择本地下载，就可以使用了 例如 1.选择你想要的icon，并把它添加到库中 2.打开库 3.把它添加到你的项目中 4.下载到本地，同时它还有修改功能，下载到本地就可以...
iconFont的使用方法
南北极之间
08-25 473
1..打开网站： https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4 2.新建项目 3.去找图标。添加到购物车。再从购物车添加到项目里面 4.查看项目的在线链接 5.把那一坨链接。复制到我们的项目中。新建一个iconfont.css的文件 6.使用： <i class="iconfont icon-bottom">&#xe619;</i&gt...
iconfont阿里图标使用方法（Font Class用法）
千里之行，始于足下
09-16 3720
iconfont阿里图标使用方法（Font Class用法）
iconfont的使用（最详解）
热门推荐
富朝阳的博客
02-20 1万+
Iconfont 是阿里巴巴矢量图标库平台（http://iconfont.cn），它允许用户访问大量图标并将它们用作网页、移动应用或其他数字界面的一部分。以下是关于 Iconfont 的介绍和使用
iconfont的使用（详细介绍）
绿色水杯
08-24 6750
今天看iconfont的使用视频，有点断片，记得基础班没有讲过，可能是资源丢掉了，总结一下使用过程。 下面是网站地址 https://www.iconfont.cn/ 使用需要登录账号，可以使用github或者微博账号登录，在右上角第一个小图标。 2. 选择自己需要的图标，先随便选中一个进行演示。（引入下面的资源） 点进去之后，鼠标移动上去，点击购物车图标 这样子的话，右上角的购物车里面就会显示出数量 3. 选择完毕之后，就点击一下小购物车 选择添加到项目（第一次使用的话需要新建一个项目，
vue中使用iconfont的font-class
明日复明日的博客
05-06 4400
进入阿里巴巴的素材库https://www.iconfont.cn/，选择需要的，加入购物车，然后下载到本地。 解压缩之后把除了demo的全部放到assets下面，创建一个文件夹iconfont全部放进去。 然后main.js里面直接调用 import "./assets/iconfont/iconfont.css" 然后在每一个vue中直接使用了。因为把图标转换成了icon...
Iconfont使用的三种方式
YMX2020的博客
06-17 1571
Iconfont使用的三种方式 ​ 作为一个前端开发，项目中用矢量图标是家常便饭，最近笔者项目中正好有使用，所以就抽空总结了一下阿里图标库的三种使用方法（笔者项目中用到的是Symbol 引用方式） 矢量图标库使用步骤如下： 首先需要登录阿里矢量图标库 ​ 阿里矢量图标库：https://www.iconfont.cn/ 挑选你需要的矢量图标并加入购物车 点击步骤1把心仪的图标加入购物车 加入完毕后，点击步骤2 准备下载你选好的图标代码 点击步骤3所示的下载代码按钮，把你选好的图标的实
iconfont通过font class引入显示小方块bug
a1071626267的博客
09-29 1124
iconfont通过font class引入显示小方块bug
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值