iconfont的使用方式

最新推荐文章于 2024-12-24 16:45:52 发布
原创 最新推荐文章于 2024-12-24 16:45:52 发布 · 797 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#icon

本文介绍了Iconfont的特点，包括跨浏览器兼容性和通过class引用图标。步骤详细讲解了如何通过preload加速、引入fontclass代码和选择图标类名。重点在于通过class方式使用和管理字体图标。

iconfont 官网

iconfont特点

1、兼容性良好，支持ie8+，及所有现代浏览器。
2、使用class来定义图标，替换图标时，只需要修改class里面的unicode引用。
3、本质上是使用字体，所以多色图标不支持。

如何使用

下面随便找一个icon测试使用

在这里插入图片描述

找到图标鼠标移入点击下载

在这里插入图片描述

这么多使用方式，下面我要说的是使用class的方式使用

首先把图标添加入库 点击添加项目，没有项目新建项目就ok了

在这里插入图片描述

然后在查看在线链接的地方点击预览字体

在这里插入图片描述

在预览字体中有相应的使用说明

最低0.47元/天 解锁文章
sslcsq
关注
Vue 中 iconfont 使用
大灰狼的小绵羊哥哥的博客
10-16 8079
Vue 中 iconfont 使用
IconFont汇总
08-10
Icon Font汇总
引入阿里iconfont图标方法以及注意事项
tuonioooo
12-27 1万+
背景在我们做日常项目时，通常会用到icon图标或者是一些图标字体，阿里iconfont是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式iconfont新建项目官网：https://www.iconfont.cn/   在首页选择【图标管理】-【我的项目】点击 【我的项目】填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。添加图标新建好项目后，找到自己想要的图标
CSS学习笔记之iconfont图标库的使用
weixin_52540797的博客
10-24 4459
在VSCode中选择文件夹font-veafwwbvy下的iconfont.css中图标的类名，并复制类名，如下图。在html文件中，首先通过link引入iconfont.css的路径，其次，在class中粘贴图标类名。点击复制代码（在线路径），再选择所需要的多色图标，复制代码（多色图标的类名）打开阿里巴巴矢量图标库，在素材库中选择多色图标库 ,选择一款多色图标。点击右上角新建文件图标，将多色图标添加到新建项目，点击确定。点击右上角新建文件图标，将多色图标添加到新建项目，点击确定。
手把手教你 iconfont 导入使用及相关配置
热门推荐
Brod-Roy的博客
12-12 1万+
iconfont是阿里旗下的一套图标库，UI设计师设计号图标后，会将图标上传到iconfont的项目库中。前端开发人员需要下载项目图标，并在项目中使用。
项目中引用 iconfont —— font class使用
cyyyeahey的博客
01-18 866
在iconfont中生成引用链接：index.html中引用使用（ class=“iconfont” 必写）：font-size设置大小。
通过class方式使用iconfont
cute_ming的博客
12-24 399
二、复制路径在index.html文件中引入。一、找到自己项目的fontclass路径。
iconfont的三种使用方式详解
10-18
文章通过实例代码和详细的步骤说明，让读者能够根据实际项目需求选择合适的iconfont使用方式，并能够熟练地将字体图标运用到网页开发中去。对于前端开发人员而言，掌握这些知识能够提升他们的开发效率和网站品质。
iconfont使用方式Unicode和Font Class均显示方框
07-11
在 iconfont 上，每个图标都有对应的 Unicode 编码，可以通过查看 iconfont 的文档或网站来获取。确保你在 HTML 中使用了正确的 Unicode 编码，并将其包裹在 `<i>` 或 `<span>` 标签中，例如： ```html <i class="...
《Iconfont三种使用方式的详细解析》
最新发布
08-02
为了更高效地使用这些图标，我们采用symbol方式（本质上是通过svg标签实现的）。为此，我们封装了一个svg-icon组件，代码如下： 通过这种方式，我们可以方便地在项目中复用图标，并且能够灵活地调整图标的样式和大小...
在vue中使用class封装iconFont组件
weixin_67886674的博客
07-09 930
当然，有的小伙伴可以说在组件标签上使用.native可以，是的，但是这样只能用作事件，我想传一些属性怎么办呢？iconFont中使用Font class的话是不能用自带颜色的，只能自己使用样式去加颜色~下载到本地后是一个压缩包，解压后放在项目的静态文件夹目录下就行。同样的，其实封装公共组件都可以用到这2个api非常方便实用。这样就可以正常使用了，接下来就是封装的重头戏~他可以获取包含所有父作用域的绑定 (包含了父作用域中的 (不含。
iconfont阿里图标使用方法（Font Class用法）
千里之行，始于足下
09-16 3892
iconfont阿里图标使用方法（Font Class用法）
【Vue】element ui等 引入iconfont彩色图标
而浮生若梦，为欢几何
02-12 1万+
一·背景 继第一篇引入图标相关的教程的续篇吧：【Vue】 element ui 引入第三方图标http://blog.youkuaiyun.com/b376924098/article/details/78286880 在前端开发的时候，需要引入彩色的图标，看到iconfont 上的彩色图标挺不错的，就引入它吧，实际上iconfont上也是有引入彩色图标的教程的，但还是遇到点麻烦。 二·教程 引入图标...
iconfont的彩色图标的使用
m0_46716264的博客
04-07 1166
首先找到你想使用的矢量图标：iconfont 找到图标添加入库： 然后添加至项目： 点击symbol然后下载到本地： 然后把选中的这几个文件放到static/font（文件夹名字随意）文件夹中。 点击那个html文件： 需要引入js文件和css文件。 我是单独在static中创建了两个文件： 其中把iconfont.js文件放到js文件夹中（我改名为了main_icon），然后把上一张图第二步蓝色框的内容添加到main_icon.scss中。 然后再main.js中引入js文件： 在App.
H5+CSS：Vue2项目引入图标字体
weixin_43932309的博客
02-18 1170
记录：Vue项目引入图标字体（iconfont）
关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）
ake520520的博客
04-12 3630
1.附阿里图标库链接：http://www.iconfont.cn/ 2.登录阿里图标库以后，搜索我们需要的图标，将其加入购物车，如图3.将我们需要的图标全部挑选完毕以后，点击购物车图标4.这时候右侧会出现一个预览窗口，显示我们前面加入购物车的那些图标，我们选择页面中的下载代码 5.查看一下我们的下载包里面都有什么文件 6.使用fontclass方式其实在下载的文件...
阿里图标（iconfont）怎么获取类名？
u012746918的博客
02-28 2028
把你要的图标添加购物车，然后点下载代码，会得到一个压缩包，解压后打开demo_fontclass.html文件，就能看到类名。在项目里作为全局引用就可以使用了。 ...
iconfont图标使用-unicode-font-class字体图标-symbol
RealizeInnerSelf丶
06-26 2117
目录web端使用icon单个使用unicode引用第一步：拷贝项目下面生成的font-face第二步：定义使用iconfont的样式第三步：挑选相应图标并获取字体编码，应用于页面font-class引用第一步：拷贝项目下面生成的fontclass代码：第二步：挑选相应图标并获取类名，应用于页面：symbol引用第一步：拷贝项目下面生成的symbol代码：第二步：加入通用css代码(引入一...
引入阿里icon库的方法（font-class 引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-15 7871
另外，建议在使用阿里矢量图标库前仔细阅读相关文档和许可证，确保符合相关要求和规定。想要让全局都能使用这些图标，还需要在app.wxss文件中引入这个iconFont.wxss文件。下载阿里矢量图标库文件：可以从阿里官网或其他可靠来源下载阿里的矢量图标库文件，通常是以。解压缩文件：将下载的阿里矢量图标库文件解压缩到本地目录中，得到一系列图标文件（通常是。所以，在class中粘贴对应图标的类名，就能在页面中看到对应的图标了。选择自己想要的图标，添加到购物车，选择【添加至项目】是阿里矢量图标库中对应图标的类名。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值