iconfont字体图标的引用

已于 2025-01-10 16:50:58 修改
阅读量332 收藏
点赞数
分类专栏： HTML/CSS Vue ant design - react 文章标签： 前端 iconfont css
于 2023-06-09 16:05:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010234868/article/details/131129470
版权
Giconfont是阿里巴巴提供的一个功能丰富的矢量图标库，支持搜索图标、自定义入库及多种引用方式，包括Unicode、font-class和symbol。它为设计师和前端开发者提供了方便的工具，可直接下载CSS或JS文件用于项目中。

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

官网：giconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具icon-default.png?t=O83Ahttps://www.iconfont.cn/1. 搜索图标，如：首页

 2. 选择想要使用的图标，添加入库

 3.  打开库，将图标添加至项目

 

 4. 点击右侧的使用帮助，页面下拉可以看到Unicode、font-class、symbol三种引用方式的使用步骤，按照步骤操作即可

 

 font-class引用的css文件可以在浏览器中打开直接拷贝，symbol引用的js文件同理：

 

Vue引入使用iconfont字体图标
m0_51431448的博客
08-08 913
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
鸿蒙开发进阶（HarmonyOS）IconFont字体图标如何在项目中当做字体使用
adaedwa187545的博客
11-01 699
hello,大家好，最近我发现了一个特殊的功能，基于‘活到老，学到老’，不断地学习才能持续进步，现在让我为你介绍如何实现IconFont图标在HarmonyOS项目中当做字体使用。
手把手教你在vue项目中使用iconfont的Symbol
前端李小白的博客
10-10 7465
symbol 支持多色图标了，不再受单色限制。 支持像字体那样通过font-size,color来调整样式。 支持 ie9+ 可利用CSS实现动画。 减少HTTP请求。 矢量，缩放不失真 可以很精细的控制SVG图标的每一部分 symbol是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。具体相关的可以参考这篇文章：手摸手，带你优雅的使用 icon 话不多说，下面说一下具体使...
使用iconfont之symbol方法引用
qq_41687400的博客
08-27 6565
首先，选择需要的图标，然后在购物车里面选择下载代码： 然后解压后将iconfont.js文件复制拷贝出来放在项目合适的位置中 我放在了src文件夹下： 放好了之后，就进行scr引用，然后采用以下的方式进行图标的引用： 这里的icon-xxx，后面的具体名称在iconfont下载的时候可以看到： 这样就可以引用成功了： ...
vue中iconfont Symbol 引用
OhRookie的博客
05-07 887
vue中iconfont Symbol 引用iconfont 使用项目中使用vue中引入 js新建svg图标组件引入全局组件页面中使用组件 最近项目中使用到多色图标，可以前的经验都仅仅是在h5页面中直接引用iconfont。此次需要在vue项目下引用多色图标，在csdn下看到一位作者的方法，经过实践并加入自己的理解写下此博客 [参考博客]: https://blog.youkuaiyun.com/qq_42268364/article/details/102484074 iconfont 使用 可在网上直接搜索icon
vue中使用iconfont(Symbol引用)
z750467878的博客
09-30 1116
在vue中使用iconfont的详细步骤
webpack中使用iconfont字体图标的方法
08-27
本文将详细介绍如何在 Webpack 环境下使用 Iconfont 字体图标。 Iconfont 是一种流行的方法，它允许开发者通过 CSS 来使用图标，而不是传统的图像格式。这样可以提高页面加载速度，同时更容易进行样式调整。然而，...
WPF 字体图标（FontAwesome、IconFont）简单使用源码
01-30
其中，字体图标（如FontAwesome、IconFont）提供了一种高效且灵活的方式来展示图标，无需处理图片资源，只需引用相应的字体文件即可。下面将详细介绍如何在WPF中使用字体图标，并扩展讲解其背后的原理和技术。 首先...
iconfont文字引入
m0_54421294的博客
11-21 248
步骤一：添加到购物车 步骤二：点击购物车选择添加到项目 步骤三：点击下载到本地 步骤四：拖到项目中
如何用symbol引用方式将iconfont引入到vue项目中
最新发布
mikasa4241的博客
12-10 405
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。
项目中引用 iconfont —— Symbol 使用
cyyyeahey的博客
01-18 875
复制在线链接：使用：xlink:href 内容为图标名字。
在vue中使用symbol引用iconfont矢量库
m0_49385985的博客
08-23 424
然后就可以直接使用了。
iconfont 中图标以及字体库在页面中的引用
weixin_50450473的博客
10-20 1285
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~B、将设计里的图标或者iconfont里的图标，以 svg 的格式，并且不同的命名，添加或上传到该项目里。font-family: 自定义名字。A、根据项目不同创建不同的项目。4、在需要的页面中调用。
web前端svg图标使用（关于阿里iconfont的symbol 引用）
Victoria_jones的博客
10-27 2187
symbol 引用是一种全新的使用方式，应该说是未来的主流，也是平台目前推荐的用法。本篇文章基于阿里的iconfont, 为您讲解web前端svg图标的使用。
解决iconfont图标symbol引用方式，图标不显示及不能变色的问题
fangcaojushi的博客
06-28 3605
解决iconfont图标无法改色 图标改色的关键是改color,还是改fill
使用 iconfont 引入字体
qq_42919799的博客
01-05 729
使用 iconfont 引入字体 1.第一步 网址输入关键字 “iconfont” 进入官网 2.第二步 3.第三步 4.第四步 解压后，将解压文件移动至项目中 5.第五步 6.第六步 使用方式有三种 以下是参考代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
引入iconfont字体的使用方法
记得抬头微笑
09-30 771
1.iconfont字体图标相对于图片来说的话，iconfont字体更容易控制、更小、更快加载。 2.首先去iconfont（阿里巴巴矢量图）找到自己想要的图标，下载代码后再项目中引用这个iconfont包 3.使用iconfont字体图标 1.打开解压后的iconfont字体图标库，打开demo_index.html文件复制 和 ...
iconfont引用方法
weixin_37585123的博客
04-09 2501
前端小白进阶路 页面对于小图标的需求 除了精灵图片可以满足后也可以引用阿里巴巴的矢量图标库 而且引用图标库感觉效率更高 而且可以让设计师偷懒哈哈 下面开始介绍教程，其实网上已经很多 但是感觉有一些细节并没有解释清楚 本文将详细介绍ICONFONT的UNICODE和SYMBOL引用 1. 在http://www.iconfont.cn/ 搜索自己想要的图标，添加到购物车 2.将选
理解Iconfont字体图标：使用与优势
"iconfont字体图标.pdf - 一份关于如何使用和理解iconfont字体图标的文档，涵盖了其意义、优势、使用方法以及ES6中的应用示例。" 本文主要介绍了iconfont字体图标及其在前端开发中的应用。iconfont是一种利用字体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值