admin管理员组

文章数量:1538443

2024年6月7日发(作者：)

iconfont的使用

Iconfont 顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类

的，而是各种图标。它的原理就是将很多 icon 做成字体库，通过样式或者字体对应的字

符集来显示这个 icon。目前比较流行的iconfont字体库有阿里的iconfont。

iconfont的使用 1

接下来看看Iconfont 的优缺点优点：

减少请求次数，将多个 icon 合并到一个字体文件中，从而提高网页性能；

颜色的；

可以动态调整图标大小、颜色等等，因为字体是可以通过样式来设置大小和

矢量图不失真；

文件加载体积小；

适合多平台（浏览器、iOS App、Android App）；

缺点：

2.如何在 HTML中使用图标字体

以阿里的iconfont图标库为例：

步骤一.找到阿里巴巴矢量图标库官网,然后注册登录

步骤二.找到图标管理->我的项目->然后新建项目

点击如下按钮，新建一个项目用于存放自己常用的图标

步骤三.往项目里添加我们想要的图标

搜索想要的图标

鼠标移到对应的图标上面，加入到购物车

步骤四.添加至购物车后，购物车上面显示对应的数量，点击购物车加入到项目

步骤五.在页面中引入生成的字体文件（分为2种，一种是直接引用线上的地址，另

一种是将字体文件下载到本地）

1.直接引用线上的地址点击"暂无代码，点此生成"

此时，点击"点此复制代码"或者直接复制下面的链接，将链接引入到html文件中

此时查看页面，图标已经显示出来了

iconfont的使用 6

下载后的文件如下：

将这些文件放入同一个目录中，然后在页面引入

此时查看页面，图标已经显示出来了

以上就是阿里巴巴矢量图标库-iconfont的使用，另外根据项目需求也可以生成自己

的图标字体，也就是将svg图片转换为图标字体，具体可参考

本文标签： 图标字体文件项目点击

版权声明：本文标题：iconfont的使用 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1717735452a604130.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。