阿里图标库的基本使用

末蓝、 2022-05-15 12:52 534阅读 0赞

**一、进入阿里图标库官网站：[http://www.iconfont.cn][http_www.iconfont.cn]**

**二、选择想要的图标加入购物车(如果不想以unicode方式使用图标，那直接下载png等格式即可)**

![70][]

**三、然后进入购物车点击下载代码**

![70 1][]

**四、解压后，选择这下图五个文件复制，其它的是demo文件，告诉我们如何使用。**

![70 2][]

**五、我在项目的assets目录下新建了个fonts目录来放这五个文件**

![70 3][]

**六、打开iconfont.css，为方便，我改了默认的图标变量名，还把图标大小font-size改为24px**

![70 4][]

**七、然后在main.js中导入此css文件**

![70 5][]

**八、然后我在我的Home.vue文件中使用这两个图标**

![70 6][]

**九、最后界面显示出来的效果如下图**

![70 7][]

这就是unicode图标的使用

相关知识（unicode是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持ie6+，及所有现代浏览器。

支持按字体的方式去动态调整图标大小，颜色等等。

但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。）

[http_www.iconfont.cn]: http://www.iconfont.cn
[70]: /images/20220515/3bf0aeabc19049639fbe40eccedb7409.png
[70 1]: /images/20220515/78f5e674a591439691a0c2c0e35714ef.png
[70 2]: /images/20220515/1d9d93470adf4444abc42faf79d6f731.png
[70 3]: /images/20220515/ad226f4a7ea84771a53c99981b917817.png
[70 4]: /images/20220515/b400297cf5de4bc38517574dd9408c85.png
[70 5]: /images/20220515/e8afd991049546f78a4652307503ca11.png
[70 6]: /images/20220515/59bcd5fbc01447e8a27dea294895e2c8.png
[70 7]: /images/20220515/59e94b6b919849799e7ed321cc3cbcb0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，534人围观）

还没有评论，来说两句吧...

相关阅读

相关阿里巴巴矢量图标库iconfont的使用

场景工作中如果用到常用的一些图片去哪寻找。阿里巴巴矢量图标库： [https://www.iconfont.cn/home/index][https_www.ic

ゝ一世哀愁。/ 2023年10月08日 11:41/ 0 赞/ 63 阅读

相关阿里图标库使用（在线使用）

1.首先你需要准备一个github或者新浪微博账号用来登录（拥有阿里员工账号也可）地址：https://www.iconfont.cn/ 2.选择图标库，在搜索框选择

Myth丶恋晨/ 2022年12月14日 06:23/ 0 赞/ 310 阅读

相关阿里的图标库

阿里的图标库 [http://iconfont.cn/plus?4rwsxfgh8=][http_iconfont.cn_plus_4rwsxfgh8] [http_ico

「爱情、让人受尽委屈。」/ 2022年07月15日 00:47/ 0 赞/ 256 阅读

相关阿里图标库+icoMoom制作字体图标

> 1、登陆阿里字体图标库：[http://www.iconfont.cn/][http_www.iconfont.cn] > > 2、选择需要下载svg格式的字体图标 >

迈不过友情╰/ 2022年05月29日 07:14/ 0 赞/ 462 阅读

相关阿里图标库的基本使用

一、进入阿里图标库官网站：[http://www.iconfont.cn][http_www.iconfont.cn] 二、选择想要的图标加入购物车(如果不想以unicode

末蓝、/ 2022年05月15日 12:52/ 0 赞/ 535 阅读

相关微信小程序中怎么使用阿里图标库中的图标

我们知道，微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的，所以，以前我们可能会在css中使用阿里图标库，但是在微信小程序中使用阿里图标库，要做一些处理 [阿

野性酷女/ 2022年04月08日 14:40/ 0 赞/ 251 阅读

相关在小程序中使用阿里文字图标库

转载 [https://blog.csdn.net/yingleiming/article/details/82691032][https_blog.csdn.net_yin

Myth丶恋晨/ 2022年03月09日 07:16/ 0 赞/ 230 阅读

相关阿里巴巴矢量图标库 iconfont图标的使用

step 1:搜索阿里巴巴矢量图标库官网（https://www.iconfont.cn）,然后注册登录,或者用github，微博登录也行,此步骤跳过; step

谁借莪１个温暖的怀抱￠/ 2022年02月02日 11:13/ 0 赞/ 509 阅读

相关阿里图标库的使用

网址：[https://www.iconfont.cn/plus/home/index][https_www.iconfont.cn_plus_home_index] 1.

矫情吗；*/ 2022年01月28日 07:19/ 0 赞/ 314 阅读

相关阿里巴巴矢量图标库字体图标的下载与使用

1、进入阿里巴巴矢量图标库：[http://www.iconfont.cn/][http_www.iconfont.cn] 2、把需要的图标加入购物车 3、点击旁

偏执的太偏执、/ 2021年11月04日 14:04/ 0 赞/ 778 阅读