使用在线链接阿里图标库（iconfont）(vue)

最新推荐文章于 2025-04-10 15:18:06 发布

weixin_43677787

最新推荐文章于 2025-04-10 15:18:06 发布

阅读量3.9k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43677787/article/details/122541407

版权

本文介绍如何在Vue项目中使用阿里图标库。步骤包括从官网选择并添加图标到项目，以及在Vue项目的index.html中引入图标库的样式。通过两种不同方式添加http或https链接。

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

1.阿里图标库网址

https://www.iconfont.cn/

2.搜索–>图标名称–>鼠标移入图标->加入购物车–>点击购物车–>添加至项目
在这里插入图片描述

2.点击Font class -->查看在线链接 -->点击复制
3.vue create 项目名称 --> public文件夹–>index.html -->给地址添加http:或者https:

/*html*/
/*第一种*/
<link rel="stylesheet" href="http:复制的地址">
/*第二种*/
<link rel="stylesheet" href="https:复制的地址">
/*例如：
 <link rel="stylesheet" href="http://at.alicdn.com/t/font_3138301_9aht8ysf0cc.css">
 <link rel="stylesheet" href="https://at.alicdn.com/t/font_3138301_9aht8ysf0cc.css">
 */
 /*vue*/
  <i class="iconfont icon-up" style="color: red"></i>

效果：
在这里插入图片描述