往项目中引入阿里巴巴图标 vue

最新推荐文章于 2025-05-06 17:50:19 发布
原创 最新推荐文章于 2025-05-06 17:50:19 发布 · 359 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #css

本文是一篇关于图标库使用的详细教程，涵盖了从挑选图标、下载fontclass类别、放置到项目assets目录，到在main.js中引入及实际使用的方法。通过此教程，开发者可以快速将图标整合到自己的项目中，实现简洁易用的界面展示。

1.选图标，添加到自己的项目（比如我创建一个test的项目）
2 选 font class 类别，下载，这个类别简洁易用（如步骤2和3）
在这里插入图片描述
3 下载后的文件夹，放到assets目录，其他目录也行

在这里插入图片描述
在这里插入图片描述
4.main.js引入

在这里插入图片描述
5 使用

// 在标签中直接使用图标的代码即可
<i class="iconfont icon-qunzu"></i>
Ideaing~
关注
我是如何在开源系统中（Vue）中引入阿里巴巴Icon图标的？
编码人生
04-25 1857
开始的背景是这样的，我们的系统是vue+elementui写的，直到在写一个博客的点赞的时候发现elementui并不能满足我们的需求，这是他自带的图标： 于是我们就做成了以下的样子： 这是使用了阿里的icon库之后的图标： 是不是好看很多，好了接下来教大家怎么在vue项目中引用 第一步，进去官网 第二步，选择自己喜欢的图标，加入购物车（免费） 第三步，进入购物车 第四步，添加至项目 第五步，下载代码 第六步，导入到vue项目中 将下载下来的所有文件放在vue项目中的icon文件夹下面.
如何将已有的阿里巴巴字体库项目添加到自己的项目中
baidu_24707273的博客
11-22 1209
将已有的阿里巴巴字体库项目添加到自己的项目中，方便管理
vue引入阿里巴巴icon
weixin_43871703的博客
01-06 566
从阿里巴巴icon里面下载的包文件吧所有的图标打包下载 把框里面的文件copy进入assets文件； 在main.js 引入iconfont.css 即可
uniapp项目或者vue项目引入阿里图标库
weixin_51591826的博客
03-16 1170
在官网把新添加的图标加入项目，然后下载文件，更换掉项目之前的文件，注意路径要修改为绝对路径。回到首页，对想要的图标进行搜索，会出现一大批相关的图标，选中符合需求的图标并添加入库。确定添加之后会跳转到我的项目这里，选择font class，然后下载到本地。如果新图标没有渲染成功，则可能是缓存的原因，可以重启项目，一般就可以解决了。入库成功后，可以在导航栏点击购物车图标进行查看并添加到刚刚新建的项目当中。登录完成之后点击资源管理中的我的项目。
在项目中使用阿里图标
兮遥
07-05 357
首先我们进入阿里图标库网站：https://www.iconfont.cn/ 点击我的项目 在这随便创建一个项目名称，一般和开发的项目名一致，创建完项目 在项目上方搜索想要的图标的名称 图标添加至创建的项目中： 首先把图标添加入库 添加至项目中 接下来就是使用，这图标: 点击生成代码 把生成的代码，引用到项目中： 搜索生成的//at.alicdn.com/t/font_1924247_o4747npr1uf.css 在页面html上使用： 图标也可以直接下载下
项目引入阿里图标库
liaoxuewu的博客
05-06 799
1.上传图标 这一步一般由UI设计师完成，阿里巴巴图标库官网：https://www.iconfont.cn/ 注意：以后每次上传完新的图标，网站上的内容都要更新，然后重新下载文件覆盖 2.下载到本地 本地在common文件夹下新建icon文件夹，将下载好的内容放入该文件夹下： 将这段代码复制下来，并且替换下载下来的iconfont.css中的代码： 结果如下： 3.项目中引用 代码中使用：复制字体class名，在需要用的标签里的class上添加上 <text class="iconf
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
如何在Vue项目中使用阿里巴巴矢量图标库
m0_63026408的博客
05-06 1410
首先我们需要找到阿里巴巴矢量库官网。
Vue3+vite引入阿里图标库的三种方式和封装svg组件
幽幽谷
09-06 631
Vue3+vite引入阿里图标库的三种方式和封装svg组件
vue中引用阿里字体图标的方法
08-28
引用阿里字体图标在 Vue 项目中是一件非常简单的事情，只需要正确地配置 Webpack 和引入阿里字体图标的 CSS 文件就可以了。如果您在使用阿里字体图标时遇到了错误问题，不要担心，只需要按照我们的步骤来解决问题就...
阿里巴巴矢量图标引入方法
Wjc_1hh的博客
05-25 847
css字体图标引入方法 在网页中将小图标制作成字体是很多网站的常用做法，为的是减少页面请求。 先推荐一个字体图标库（阿里巴巴矢量图标库） https://www.iconfont.cn/ 一、首先根据项目按需选择好自己需要的图标，添加至入库 二、都选好后，将库中的图标添加至项目中，没有项目可先创建项目，添加在项目里后，将项目下载至本地，解压出来即可 三、最后就可以在代码中引入图标了（字体图标文件里的html文件里可打开查看图标的代码） 注...
Vue项目中使用阿里图标库
weixin_50027754的博客
11-13 156
1.百度进入阿里图标库官网注册 2.找到图标管理、我的项目 ** （1）点紫色按钮的这个创建自己的项目** （2）**FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。 你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来** （3）** 项目创建完了，你可以往项目里面添加自己想要的图标了** （4）下载到本地 （5）找到项目中的main.js文件，导入iconfont.css样式
在 Vue 项目中全局引入图标，可以通过以下步骤实现：
靡不有初，鲜克有终
03-05 538
选择一个图标库，比如 `@element-plus/icons-vue`（Element Plus 的图标库）或 `@ant-design/icons-vue`（Ant Design Vue 的图标库）。如果你使用的是其他图标库，比如 `@ant-design/icons-vue`，步骤类似，只需调整安装包和注册方式即可。#### 配置 `vite.config.js` 或 `vue.config.js`通过以上方法，你可以在 Vue 项目中全局引入图标库，方便在项目中使用图标。
阿里字体图标库在项目中引用
susu_lsq的博客
03-10 692
在vue项目中需要大量使用字体图标，由于使用单个icon引入的方式太过麻烦，所以使用阿里图标库官方提供的项目方法引入进自己的项目中 1、登录，并将需要的字体图标加入购物车，点击‘添加至项目’选项 2、选择自己的项目，项目名字是随便写的，最好是跟自己开发的项目名称一致，便于区分 3、引入；将下图生成的地址在vue中的index.html中引入，一定要在html中引入，否...
vue项目中引入字体图标库（傻瓜式教程，详解）
逆水行舟 不进则退
04-02 5048
在vue项目中使用字体图标库，完整版详细步骤
VUE项目中引入第三方字体图标库
cage7181的博客
10-12 721
VUE+element-ui项目，使用中用到大量图标，而element-ui本身的图标库数量太少，并不能满足使用！ 引用阿里巴巴矢量图标库： 1、登陆https://www.iconfont.cn/（没有账号需注册） 2、创建项目 3 、创建项目后去图标库添加图标，用哪个添加哪个到购物车 4、添加完后...
使用图标库
小脚的Blog
10-09 405
一使用BootCDN图标库 1.在线使用图标库 官网打开https://www.bootcdn.cn/，然后在搜索库中搜索font 选择第一个font-awesome 尽量选择版本高的 选择一个复制link 在网站https://fontawesome.dashgame.com/选择自己需要的图标复制标签，例如fa-adjust 需要修改的只有圈住的地方 2.在本地使用图标 本地使用时，需要把下载好的图标库移动到项目目标文件内，其他步骤同在线操作一样 使用UR.
vue项目引入iconfont矢量图标库
qq_44242707的博客
04-18 846
Vue项目中引入iconfont图标库的两种方式：单色字体图标和多色SVG图标。单色图标通过CSS引入和字体类名使用，可动态变色；多色图标通过JS引入和SVG标签引用，支持多路径颜色。文章详细介绍了图标文件下载放置路径、使用方法及原理说明，包括单色图标的字体实现方式和多色图标的SVG技术特点，指导开发者根据需求选择适当的图标类型。两种方式各有优势，单色图标灵活变色，多色图标视觉丰富。
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
weixin_44867717的博客
04-08 7352
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式 一、下载图标 1、先进入iconfont.cn页面 iconfont官网：https://www.iconfont.cn/ 2、登陆，并选择你要用的图标进行下载 3、点击下载，并选择弹框下面的色值和大小，点击svg下载，并进行重命名 1-浅灰正常图标 2-明蓝高亮图标 4、把下载的svg图标，放进本地项目里的某个文件夹，进行使用 二、使用图标 1、找到所需界面的html代码 2、在HTML中插入css文件 3、 在html里面插入一
vue3项目中如何引入阿里巴巴矢量图标库
最新发布
09-11
在 Vue3 项目中引入阿里巴巴矢量图标库有以下两种常见方法： #### 在线使用 这种方式较为简单，只需在 HTML 文件中引入在线的 CSS 文件。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_xxxxxx.css"> <!-- 替换为你的在线 CSS 链接 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue3 App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` 在组件中使用图标： ```vue <template> <i class="iconfont icon-xxx"></i> <!-- 替换为你的图标类名 --> </template> <script setup> // 组件逻辑 </script> ``` #### 本地引入 1. 进入阿里巴巴矢量图标库，将需要的图标添加到购物车，再将购物车的图标添加到项目（没有项目则新建项目），然后下载压缩包。 2. 删除压缩包内带 `demo` 字样的两个文件。 3. 在 Vue 项目的 `assets` 下建立 `iconfont` 文件夹。 4. 将压缩包文件拖入 `iconfont` 文件夹内。 5. 在 `main.js` 文件中引入 `iconfont.css`： ```javascript import { createApp } from 'vue' import App from './App.vue' import '@/assets/iconfont/iconfont.css'; // 引入本地图标 CSS const app = createApp(App) app.mount('#app') ``` 在组件中使用图标： ```vue <template> <i class="iconfont icon-xxx"></i> <!-- 替换为你的图标类名 --> </template> <script setup> // 组件逻辑 </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值