导入阿里图标库

原创 已于 2023-01-29 17:33:45 修改 · 676 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

于 2023-01-29 11:12:46 首次发布
本文介绍了一种在项目中引入阿里图标库的具体步骤：通过在src目录下创建iconfont.css文件并引入相应的URL链接，最后在main.js文件中加载样式，实现图标库的使用。

一. 第一种方法导入阿里图标库

1. 在项目的src目录里面写入css，css里面写入iconfont.css，

2. 在iconfont.css里面写入@import url('https://at.alicdn.com/t/c/font_3871204_ca4pslau5fh.js')   

3. 然后在main.js里面写入 import './assets/css/reset.css'

4. 这样就可以在项目里面用阿里图标库的图标了

@codercjw
关注
【微信小程序---如何引入阿里巴巴图标步骤】
m0_56349322的博客
02-23 1540
1.iconfont-阿里巴巴矢量图标库下载图标 2. 3. 4 5 6
Vue3+vite引入阿里图标库的三种方式和封装svg组件
幽幽谷
09-06 633
Vue3+vite引入阿里图标库的三种方式和封装svg组件
引入阿里icon库的方法（font-class 引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-15 7871
另外，建议在使用阿里矢量图标库前仔细阅读相关文档和许可证，确保符合相关要求和规定。想要让全局都能使用这些图标，还需要在app.wxss文件中引入这个iconFont.wxss文件。下载阿里矢量图标库文件：可以从阿里官网或其他可靠来源下载阿里的矢量图标库文件，通常是以。解压缩文件：将下载的阿里矢量图标库文件解压缩到本地目录中，得到一系列图标文件（通常是。所以，在class中粘贴对应图标的类名，就能在页面中看到对应的图标了。选择自己想要的图标，添加到购物车，选择【添加至项目】是阿里矢量图标库中对应图标的类名。
阿里图标库引用方法
qq_60012576的博客
06-07 3145
阿里图标库引入方法
阿里图标的引入方式
chenlim87的博客
08-13 1325
平时做项目肯定少不了图标，一些组件自带一些图标，但是可能没有我们需要的，这时候就要借助于强大的阿里图标了。怎么使用呢？ 一、font-class方式 1.输入想要搜索的图标名搜索(要先登录账号) 2.将图标加入购物车 3.点击购物车，将图标加入项目，可以新建项目，也可以选择原有的项目 4.加入到项目后，会自动跳转到项目里，展示此项目里所有的图标 5.选择Font class,然后点击更新代码 6.代码更新完毕后会生成一个链接，将链接复制到浏览器地址栏，复制所有代码 7.在项目src/assets下新建一个
如何在项目中引入阿里适量图标库
优快云_xiaomei的博客
02-28 683
以上就是在项目中引入阿里图标使用的方法了，如有不会的请留言在下方，我会回复。中找到自己想要的 icon 添加到项目中即可。第二步将下载后的文件解压出来放入到项目当中。第三步就是在项目中哪里需要哪里就在哪引入。在这里我拿Vue来示范，React同下。第四步就是在项目中使用啦。
精选资源
Draw.io用阿里云3D矢量图标库-2022企业应用
06-19
Draw.io用阿里云3D矢量图标库-2022企业应用，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...
精选资源
Draw.io用阿里云3D矢量图标库-2022人工智能与物联网
06-19
Draw.io用阿里云3D矢量图标库-2022人工智能与物联网，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...
精选资源
Draw.io用阿里云3D矢量图标库-2022大数据
06-19
Draw.io用阿里云3D矢量图标库-2022大数据，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...
精选资源
Draw.io用阿里云3D矢量图标库-基础图形
06-19
Draw.io用阿里云3D矢量图标库-基础图形，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...
小程序如何引入阿里图标。
后生丶的博客
08-03 5854
1、将阿里图标加入购物车下载到本地，解压下载的文件，找到ttf后缀的文件。 2、通过https://transfonter.org平台将ttf转换成base64格式 3、把转换后的文件夹里的css后缀格式的文件后缀改成wxss。 4、把第一步下载解压文件里的iconfont.css里内容复制到你需要引入的wxss里，具体复制内容如下图： 5、在需要引入图标的wxss里引入转换后的wxss ...
icon阿里图标引入方式
qq_35779070的博客
06-14 524
icon阿里图标引入方式 下载下来，起名fonts,放到项目中，每次更新时，将unicode方式下的代码复制到iconfont.css文件中，然后添加每个icon的css。 文件夹类似： iconfont文件打开后：
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程
张国军_Suger
04-04 7936
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程 作者：张国军_Suger 开发工具与关键技术：Win10、项目、图标         对于编程人员来说，有一个不可获取的图库就是阿里图标库，这个图标库可以帮助我们把很多图标编译成文件，这样就可有方便我们调用。不需要繁杂的操作，只需按照步骤来就会变...
vue项目引入阿里云图标库
weixin_61001537的博客
10-23 289
3.可以上传ui绘制的图标到该项目文件夹，也可以在阿里云图标库中加入购物车统一放到该项目文件夹。fontclass的点缀代表着下载的每个图片名称的的前缀。目的是统一图标的名称。5.项目新建一个文件夹存放这些文件(可以全部引入这些文件，也可只引红框的文件)1.创建账号，个人或者公共账户都可以，以下是登录进来的页面。3.2 在阿里云图标库选择icon加入项目文件夹。3.1上传ui绘制好的图标或其他图标。4.下载所有图标引入到项目当中。6.挂载入口文件main.js。
【Vue】前端项目引入阿里图标
m0_61049675的博客
01-30 995
注意：iconfont是固定的，icon-sousuokuang为图片红框部分。
2017 阿里巴巴矢量图标库 导入所选图标到jsp页面步骤
你好邱林和的专栏
01-04 4430
阿里巴巴矢量图标库 导入所选图标到jsp页面步骤，给新手看的，自己也是第一次使用，希望对其他人有帮助，因为看到网站很多博客，都说的不是很清楚，避免有人走弯路。     1.需要注册一个github账号：         登陆阿里巴巴矢量图标库网站，选择自己想要的图标，添加入库，可以连续添加好几个的，如下图：         2. 进入你的购物车，也就是那个库里面，选择“下载代码”，会出现一个
阿里图标库的几种引入方式
wsl9420的博客
06-13 8514
阿里图标库的几种引入方式背景做图标的两种方式切图使用阿里图标第一种引入方式(下载文字图标到本地） 背景 在做 uni-app 项目时，遇到图标的开发。提供两种思路 做图标的两种方式 切图 在有美工的情况下，直接让美工进行切图。也无需调整样式。图标大小也还好。 使用阿里图标 阿里巴巴图标库 第一种引入方式(下载文字图标到本地） 1、 下下载字体到本地 2、 ...
在项目中引入阿里图标库iconfont
weixin_43493113的博客
01-22 988
在项目中引入阿里图标库iconfont 1、首先是阿里图标库的地址：https://www.iconfont.cn/ 2、进入后选择要引入的图标添加进购物车，点击购物车，添加至要引入的项目； 3、找到添加的项目，点击查看查看在线连接。生成在线的链接； 4、将生成的链接复制到浏览器的地址栏，打开生成代码； 5、复制代码在项目中即可。 ...
线上方式引入阿里字体图标库
weixin_46058007的博客
06-06 879
通过线上引入方式使用阿里字体图标库
阿里图标库 vue3
最新发布
03-30
### Vue3 中阿里图标库的使用教程 #### 1. 安装依赖 在 Vue3 项目中集成阿里图标库之前，需确保安装必要的工具包 `@ant-design/icons-vue` 和其他可能需要的依赖项。可以通过 npm 或 yarn 进行安装： ```bash npm install @ant-design/icons-vue --save ``` 或者 ```bash yarn add @ant-design/icons-vue ``` 此操作会下载并安装 Ant Design 的图标组件库，该库支持动态加载阿里云图标的 SVG 文件[^1]。 --- #### 2. 引入阿里图标库通用样式 为了使整个项目能够统一应用阿里图标库的样式，在项目的入口文件（如 `App.vue` 或者 `main.ts/main.js`）中引入通用 CSS 样式： ```css /* App.vue */ <style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> ``` 上述代码只需全局引入一次即可生效。 --- #### 3. 添加字体文件至静态资源目录 将从阿里图标平台下载下来的 `.ttf` 字体文件以及对应的 `iconfont.css` 文件放置于项目的静态资源目录下（通常为 `/public/static/`）。随后调整 `iconfont.css` 文件中的路径设置以匹配实际部署环境的需求： ```css /* 修改后的 iconfont.css */ @font-face { font-family: "iconfont"; src: url('/static/iconfont.ttf') format('truetype'); } ``` 这里需要注意的是，如果项目采用相对路径，则应根据实际情况修正 URL 地址[^2]。 --- #### 4. 在页面中使用自定义图标 完成以上配置之后，便可以在任意 Vue 组件内通过 `<uni-icons>` 或者直接利用 HTML 实现方式来调用所需图标： ```html <template> <!-- 使用 uni-icons --> <uni-icons custom-prefix="iconfont" type="icon-gongshangzhuce" size="30"></uni-icons> <!-- 或者直接嵌套 i 标签 --> <i class="iconfont icon-gongshangzhuce"></i> </template> <script setup lang="ts"> // 如果需要 TypeScript 类型声明可以在此处导入相关内容 </script> <style scoped> @import '@/static/iconfont.css'; </style> ``` 此处展示了两种不同的实现形式供开发者选择适用场景下的最佳实践方案。 --- #### 5. 动态加载图标 (可选) 对于某些特殊需求而言，比如按需加载特定图标而非一次性全部加载所有图标的情况，推荐借助官方文档提供的 API 方法来进行处理。具体细节请参阅 [@ant-design/icons-vue](https://www.npmjs.com/package/@ant-design/icons-vue)。 --- ### 总结 综上所述，Vue3 配合阿里图标库的具体流程大致分为以下几个方面：首先是安装必要插件；其次是正确配置全局样式的引入位置；接着把相关字体文件妥善存放到合适的位置并更新其引用链接；最后按照既定模板书写前端界面逻辑部分即可顺利完成整个过程。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值