vue前端项目中使用阿里矢量图标（Font class）

最新推荐文章于 2024-05-05 20:33:40 发布
最新推荐文章于 2024-05-05 20:33:40 发布
阅读量2.4k 收藏 7
点赞数
分类专栏： 工具方法 文章标签： vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wh13821662259/article/details/109147714
版权

一、登录阿里巴巴矢量图标库

阿里巴巴矢量图标库

二、点击图标库

在这里插入图片描述

三、选择图标

选择图标后，会进入该类型的图标库，然后鼠标划上想选择的那个图标，会有三个选择，分别为“添加入库”， “收藏”和“下载”， 这里我们点击“添加入库”

四、加入购物车

点击“添加入库后”，我们会在页面的右上角看到购物车的图标，然后点击进入购物车

在这里插入图片描述
在这里插入图片描述
点击“添

最低0.47元/天 解锁文章
以沫wh
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在 Vue 中使用阿里巴巴黑白图标和彩色图标 在 Vue 项目中，使用阿里巴巴黑白图标和彩色图标可以为我们的应用程序添加视觉吸引力和丰富的用户体验。阿里巴巴图标库提供了大量的图标资源，包括黑白小图标和彩色图标，...
vue文件如何引入icon图标并使用
weixin_45899022的博客
02-11 2929
1、进入阿里矢量图标库https://www.iconfont.cn.并登录 2、选择自己需要的图标并加入购物车 3、选完后点击右上角的购物车图标，点击“添加至项目”，点击后会跳到所属的项目，选择“Font class”,然后点击“下载至本地” 4、下载完后，解压，改文件名为“icon” 5、然后把icon文件复制到vue项目的assets目录 6、在main.js全局引入iconfont...
vue+css左边三角形的矩形完成自定义流程图（可扩展）
qq_41444226的博客
05-11 1131
组件用到所有图标都来自阿里云iconfont 效果图 效果图 1、页面 <template> <div class="custom-map-for-approval"> <h2 class="map-title">审批进度</h2> <template v-if="nodeList && nodeList.length > 0"> <div class.
Vue引入阿里妈妈iconfont图标
最新发布
2301_76662406的博客
05-05 1263
此外，index.html 中通过 标签引入了 Vue 应用程序的 JavaScript 文件（app.js），它包含了 Vue 组件和应用逻辑的代码。ESLint 是一个用于在 JavaScript 代码中进行静态代码分析和检查的工具，它可以帮助开发人员发现和修复潜在的问题、统一代码风格，并遵循预定义的规则和最佳实践。.eslintrc.js 文件用于配置 ESLint 的规则和选项。在 ESLint 的配置中，有两个重要的文件：.eslintignore 和 .eslintrc.js。
vue添加个性化图标
yeler082的博客
09-28 4783
element-ui自带的图标库还是不够全，还是需要需要引入第三方icon，自己在用的时候一直有些问题，参考了些教程，详细地记录补充下 对于我们来说，首选的当然是阿里icon库 教程： 1.打开阿里icon，注册 &gt;登录&gt;图标管理&gt;我的项目   图标管理&gt;我的项目，点进去 新建项目   新建项目 项目名称随便写。前缀注意，不要跟element-ui...
Vue3 项目引入阿里 iconfont 图标和字体
weixin_42365757的博客
11-02 1万+
Vue3 项目引入阿里 iconfont 图标和字体
vue3项目引入第三方图标（阿里图标）
kanno的博客
03-01 1341
vue3项目引入第三方图标（阿里图标）
vue中引用阿里字体图标的方法
08-28
这样，Webpack 就会使用 file-loader 来处理字体文件，我们就可以在组件中使用阿里字体图标了。 解决常见的错误问题 在引用阿里字体图标时，很多开发者会遇到各种错误问题，例如无法加载字体文件、图标不显示等...
让你在Vuepress中可以直接使用FontAwesome的图标
08-08
4. **在Vuepress中使用图标**：现在你可以在Markdown文件中使用这个自定义组件来显示Font Awesome图标。例如： ```markdown --- layout: default --- # 页面标题 这是一个示例图标：<FontAwesome icon=...
Vue项目中如何引入icon图标
08-27
Vue项目中如何引入icon图标 标题解释 本文的标题“Vue项目中如何引入icon图标”详细介绍了在Vue项目中如何引入icon图标的方法。该文章通过图文并茂的形式，向读者展示了详细的引入icon图标的步骤。 描述解释 文章...
在vue项目中优雅的使用SVG的方法实例详解
10-17
本文旨在介绍如何在项目中配置和方便的使用svg图标。本文以vue项目为例给大家介绍在vue项目中优雅的使用SVG的方法，需要的朋友参考下吧
Vue3中使用阿里iconfont
一个菜鸟的开始
11-26 722
【代码】Vue3中使用阿里iconfont。
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
qq_46103732的博客
11-24 4303
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
vue3前端项目引入iconfont阿里图标
bighead的博客
03-22 7115
1.首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 2. 进入项目以后 选择 Font class 并下载到本地 下载到本地，解压以后的文件夹列表如下： 3. 把红框中的部分 粘贴到 自己的项目中，记得放在 static（或assects目录）文件目录下，因为字体图标也属于静态资源的一部分。 4.在main.ts文件内全局引入 阿里云字体图标 css,记得使用 路径要正确，如果此时编译不正确，说明 引用路径存在问题 import { createApp } from 'vue' im
vue前端项目引入iconfont阿里图标的四种方式
热门推荐
qq_35430000的博客
02-12 2万+
一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...
vue项目中使用阿里iconfont图标
肖帅的博客
01-14 6440
本文是在vue项目中集成阿里iconfont图标库，本文添加的图标结果案例如下图所示。 具体步骤如下： 1，进入阿里 https://www.iconfont.cn 图标库，登录自己的账号密码，如果没有账号，请先注册账号后登录。 2，在iconfont首页 点击“图标管理”后选择“我的项目”，如下图所示。 3，新建项目，在图标管理中，选择如下图所示的紫色按钮图标，点击后会出现新建项目的弹框，如...
vue中使用iconfont的font-class
明日复明日的博客
05-06 4313
进入阿里巴巴的素材库https://www.iconfont.cn/，选择需要的，加入购物车，然后下载到本地。 解压缩之后把除了demo的全部放到assets下面，创建一个文件夹iconfont全部放进去。 然后main.js里面直接调用 import "./assets/iconfont/iconfont.css" 然后在每一个vue中直接使用了。因为把图标转换成了icon...
vue使用阿里矢量图标
07-28
Vue可以使用阿里矢量图标库来使用阿里矢量图标。首先，你需要在你的Vue项目中安装`@vue/cli`，如果你还没有安装的话，可以通过以下命令进行安装： ``` npm install -g @vue/cli ``` 安装完成后，你可以在你的Vue项目中使用以下命令来安装阿里矢量图标库： ``` npm install @ant-design/icons-vue ``` 安装完成后，在你的Vue组件中，你可以通过以下方式来使用阿里矢量图标： ```vue <template> <div> <a-icon type="icon-name" /> </div> </template> <script> import { Icon } from '@ant-design/icons-vue'; import { createFromIconfontCN } from '@ant-design/icons-vue'; const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1234567_xyz.js', // 替换为你自己的图标库链接 }); export default { components: { 'a-icon': Icon, }, }; </script> ``` 在上面的代码中，`icon-name`是你想要使用的具体图标的名称，你可以在阿里矢量图标库中找到你需要的图标名称。 另外，如果你想要使用自己的图标库链接，你可以替换`scriptUrl`为你自己的链接。 这样，你就可以在Vue项目中使用阿里矢量图标了。希望对你有所帮助！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值