阿里矢量图的使用

阿里矢量图库项目文件夹的创建与管理

1.https://www.iconfont.cn/  登陆阿里图库

2.头部导航栏部分 图标管理---我的项目

3.我的项目右侧第二个选项新建项目

注:

如果已有项目处于开发中则使开发中的项目的图库文件夹

阿里矢量图库使用方法

1.图标搜索框搜索图标

2.对选中图标添加入库

3.选中需要使用这些图标的项目文件夹

4.确定加入项目文件夹

5.将图标下载至本地

阿里矢量图下载至本地后的使用方法

1.删除demo文件中图标配置文件:iconfont.css和图标文件:iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff之外的所有图标文件

2.图标配置文件:iconfont.css配置图标的路径和引入图标的图标样式

3.将iconfont.css引入

svg简介

1.svg是一个贝塞尔曲线的图片形式

web图简介

1.web图是像素点组成的图片

svg图与web图的区别

1.svg不会放大后变模糊

2.web图会放大后变模糊

 

 

 

 

常见疑难

1.测量的阿里矢量图自带内外边距导致不能精确到像素

解决方法:

未知

项目新增阿里矢量图

  1. 将新的图标加入阿里图库的项目文件夹
  2. 将项目文件夹下的所有阿里图标重新打包下载
  3. 将所有阿里图库和阿里图库的配置文件重新存入项目的css文件夹

矢量图不显示

  1. 矢量图css配置文件的文件路径不正确
  2. css配置文件没有引入需要使用该矢量图的unicode编码的项目文件

 

 

 

猜你喜欢

转载自blog.csdn.net/qq_38603437/article/details/88212394
今日推荐