新手如何快速上手使用图标字体

202 阅读1分钟

1.灵活性:灵活地修改样式,例如:尺寸、颜色等

2.轻量级:体积小、渲染快、降低服务器请求次数

3.兼容性:几乎兼容所有主流浏览器

1.注册账号

目前国内比较火的图标字体网址:[iconfont-阿里巴巴矢量图标库](https://www.iconfont.cn/)。
需要先进入网站注册一个账号,一般使用电话号码注册,或者可以使用github/或者微博账号注册登录哦

Snipaste_2022-07-18_20-35-22.png

Snipaste_2022-07-18_20-37-06.png

2.搜索以及创建项目加购需要的图标

通过搜索关键字,在阿里图标库里面挑选你项目开发中所需要的图标,然后加入购物车。

Snipaste_2022-07-18_20-48-56.png

将鼠标悬停至需要的图标处 点击添加至购物车即可。

8.png

点击右上的购物车按钮

9.png

点击添加至项目 如果没有项目的话,可以先点击加入项目右侧的添加项目按钮创建一个。(建议填写和你开发项目相同的名称)

10.png

然后找到你的项目 点击下载 如下图所示。

Snipaste_2022-07-18_20-59-23.png

Snipaste_2022-07-18_21-01-14.png

3.在项目中引入

下载好后是一个压缩包 解压就可以了。建议将文件夹修改名字 fonts 拷贝至项目中

Snipaste_2022-07-18_21-04-07.png

demo_index.html 这个文件是线下版的参考文档 可以打开参考使用方法

需要使用图标字体的网页需要 引入iconfont.css这个文件

Snipaste_2022-07-18_21-08-49.png

4.使用方法:

在标签中使用类名引入

标签中第一个是类名是固定的,第二类名则是你所需要的图标字体的类名。

Snipaste_2022-07-18_21-10-47.png 显示效果 默认字体大小是16px 黑色。

Snipaste_2022-07-18_21-11-06.png

Snipaste_2022-07-18_21-13-30.png