阿里字体图标怎么用_阿里巴巴矢量图标库是免费用的吗

阿里字体图标怎么用_阿里巴巴矢量图标库是免费用的吗阿里字体图标的使用_字体图标阿里

为什么要使用字体 图标 和 使用字体图标的优势:

这是因为图片不能很好地进行缩放,当图片进行放大时会失真(即变模糊)。而且加载每一张图片都需要一次“http请求”,因此也拖慢了整个加载页面的时间。另外,要是没有图片编辑器(软件)的话就很难对图片进行编辑、处理等操作。

字体图标的优势:字体就不会有以上这些问题,字体可以进行随意缩放,不会变形 可以的通过CSS来控制它的大小和颜色,并且每一个字符都不需要进行额外的“http请求”。当我们把字体当成文字用来写作的时候,往往没有想到的是,它们只是一种形状而已。

阿里矢量图标官网: www.iconfont.cn

1- 点击列表中的第一个 图标库, 打开一个 新页面, 并把自己喜欢的图标添加到库里面;
在这里插入图片描述
2- 添加到库:
在这里插入图片描述
3- 右上角有一个类似购物车,你添加到库里面的字体图标全部在里面;
在这里插入图片描述
4- 点击添加到项目
在这里插入图片描述
在这里插入图片描述

5- 下载至本地:(最关键的一步)
在这里插入图片描述
6- 下载下来解压后的文件如下:
在这里插入图片描述
7- 如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加一个类名 并把相对应的代码复杂粘贴到标签上。
1 ,打开这个 demo_index.html 只需要复制这串代码即可 如图:
在这里插入图片描述
2,然后把 iconfont.css 粘贴到 css 文件夹中 这是我的项目文件夹和对应的代码:
在这里插入图片描述
3,觉得字体太小的话可以通过 font-size 属性来控制在这里插入图片描述
8- 另一种用法
1,引用在这里插入图片描述 在这里插入图片描述
2,使用

今天的文章阿里字体图标怎么用_阿里巴巴矢量图标库是免费用的吗分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/70397.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注