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

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

#iconFont

博客介绍了iconFont的使用方法，包括点击购物车添加至项目、更新代码并复制到项目中、在标签里引用类名。还提到了避免样式冲突的办法，即在项目中点击更多操作编辑项目，修改前缀，使用时类名对应即可。

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


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

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

如何避免样式冲突

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

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

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

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

在这里插入图片描述

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

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

Vue引入iconfont图标，使用svg-icon
immocha的博客
07-03 1373
iconfont真是太好用了，之前一直使用font-class方式来引用，但是iconfont说Symbol 引用才是未来的主流，那么我们是一定要跟上主流的。 在vue中使用Symbol引入貌似比font-class要复杂一些，但只要一次配置好，之后就很方便了。
2o3t-IconFont：[库] 2O3T-Icon-Font
02-04
【2O3T-IconFont】是一个专门设计的图标库，它将一系列矢量图形转换为Web字体，便于在网页设计中使用。这种技术被称为Icon Font，它允许开发者通过CSS来控制图标的大小、颜色、阴影等样式，与处理文本一样简单。与...
iconfont的font-class方法
qq_46456369的博客
07-23 357
这次颜色很顺利的出来了
iconfont字体图标的使用方法之Font class--超简单
六耳石猴的博客
08-03 5366
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;
只靠粘贴获得一套线性iconfont图标（全网独一份）
最新发布
2403_87204123的博客
11-21 572
本文介绍了一种自制线性iconfont图标的方法。通过截图工具（如Snipaste）和阿里巴巴矢量图标库，选取所需图标后下载黑白和彩色两版PNG格式。使用Axure将彩色图标放大至1000x1000后截取彩色部分，替换黑白图标中的相应元素，从而制作出带颜色点缀的线性图标。该方法适用于白色或灰色背景，操作简单但需注意保持高像素质量。虽然是个"笨方法"，但为不会设计图标的人提供了实用解决方案。
iconfont阿里图标使用方法（Font Class用法）
千里之行，始于足下
09-16 3921
iconfont阿里图标使用方法（Font Class用法）
vue中使用iconfont的font-class
明日复明日的博客
05-06 4424
进入阿里巴巴的素材库https://www.iconfont.cn/，选择需要的，加入购物车，然后下载到本地。 解压缩之后把除了demo的全部放到assets下面，创建一个文件夹iconfont全部放进去。 然后main.js里面直接调用 import "./assets/iconfont/iconfont.css" 然后在每一个vue中直接使用了。因为把图标转换成了icon...
vue项目使用iconfont图标之fontc-class的使用
如的博客
08-10 1873
最近用到阿里巴巴矢量图标，在此分享下小经验 1将你所需要的图标先都加入购物车，然后在购物车那里添加到你的项目中去，最后下载到本地 不要一个一个下载代码，因为到时候这些都要持续集成到你的真实项目中，其文件名都是一样的。最后确定后在 资源管理-》我的项目-》下载到本地 下载后的文件如下，我采用的是font-class，我实际需要的文件是这些 2 引用到项目中，使用class类名即可 1)需在vue中引入iconfont.css文件，我写在main.js中import引入可以 im.
Hui-iconfont_v1.0.9.zip
05-01
在使用Hui-iconfont_v1.0.9时，开发者首先需要将字体文件引入到项目中，然后可以通过CSS的`content`属性或使用特定的类名来显示图标。例如，如果一个图标的Unicode编码是`\e600`，在CSS中可以这样写： ```css .icon...
iconfont的三种使用方式详解
01-19
在我们项目中经常要使用到iconfont，在此我们使用阿里巴巴矢量库提供的icon图标，此图标库足够为我们提供大量的图标，我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号，并且新建一个项目，这个项目包含了你...
Vue-iconfont：优雅引入Iconfont.cn图标，支持font-class与symbol
在前端开发中，图标字体（iconfont）是一种常用的方法来表示各种图标和符号。它通过字体文件来实现图标的显示，具有可缩放、支持彩色、易于更换主题颜色等优点。Iconfont.cn 是一个流行的中文图标字体库，提供大量的...
iconfont图标Font class使用
weixin_45866961的博客
05-11 334
阿里巴巴矢量图iconfont图标Font class使用
iconfont图标使用-unicode-font-class字体图标-symbol
RealizeInnerSelf丶
06-26 2134
目录web端使用icon单个使用unicode引用第一步：拷贝项目下面生成的font-face第二步：定义使用iconfont的样式第三步：挑选相应图标并获取字体编码，应用于页面font-class引用第一步：拷贝项目下面生成的fontclass代码：第二步：挑选相应图标并获取类名，应用于页面：symbol引用第一步：拷贝项目下面生成的symbol代码：第二步：加入通用css代码(引入一...
iconfont的用法
一个小白的求知路
04-12 727
目前我已知有两种获取iconfont的方法，1.使用阿里的iconfont库获取 2.使用在线生成工具 首先介绍阿里的 阿里iconfont库 进入之后选择你想要的icon，然后把他添加到你的项目中，选择本地下载，就可以使用了 例如 1.选择你想要的icon，并把它添加到库中 2.打开库 3.把它添加到你的项目中 4.下载到本地，同时它还有修改功能，下载到本地就可以...
iconFont的使用方法
南北极之间
08-25 530
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的Unicode和Font class使用方法
weixin_64388392的博客
11-13 2849
阿里巴巴矢量图标库——iconfont的Unicode和Font class两种使用方式
iconfont的使用（最详解）
热门推荐
富朝阳的博客
02-20 1万+
Iconfont 是阿里巴巴矢量图标库平台（http://iconfont.cn），它允许用户访问大量图标并将它们用作网页、移动应用或其他数字界面的一部分。以下是关于 Iconfont 的介绍和使用
项目中引用 iconfont —— font class使用
cyyyeahey的博客
01-18 874
在iconfont中生成引用链接：index.html中引用使用（ class=“iconfont” 必写）：font-size设置大小。
iconfont的使用（详细介绍）
绿色水杯
08-24 6829
今天看iconfont的使用视频，有点断片，记得基础班没有讲过，可能是资源丢掉了，总结一下使用过程。 下面是网站地址 https://www.iconfont.cn/ 使用需要登录账号，可以使用github或者微博账号登录，在右上角第一个小图标。 2. 选择自己需要的图标，先随便选中一个进行演示。（引入下面的资源） 点进去之后，鼠标移动上去，点击购物车图标 这样子的话，右上角的购物车里面就会显示出数量 3. 选择完毕之后，就点击一下小购物车 选择添加到项目（第一次使用的话需要新建一个项目，
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值