阿里巴巴字体图标库

阿里巴巴字体图标库

网址

https://www.iconfont.cn/

阿里巴巴字体图标库_第1张图片
说明:搜索框支持拼音、英文

操作步骤

1、选择图标

阿里巴巴字体图标库_第2张图片

2、点击购物车,进入如下界面

阿里巴巴字体图标库_第3张图片

温馨提示:因为后面不确定是否还会修改所需图标,所以建议使用== 添加至项目==

3、进入项目

阿里巴巴字体图标库_第4张图片

4、选择项目-选择Font Class-选择查看在线链接阿里巴巴字体图标库_第5张图片

5、点击复制代码

阿里巴巴字体图标库_第6张图片

6、css文件

阿里巴巴字体图标库_第7张图片

7、引入字体文件

全选css文件内容,复制内容到项目中,比如文件名称为:iconfont.css。

8、应用图标文件(验证)

8.1、引入字体文件

@import "./styles/iconfont.wxss";

8.2、使用

  
  

8.3、效果

阿里巴巴字体图标库_第8张图片

你可能感兴趣的:(Web前端技术,图标库,阿里巴巴字体图标库,Iconfont使用,在线图标库,图标库使用)