图标的制作和上传可以参照官网给出的文档:
Page 1
图标的下载和使用官网上说的不是很清楚,简单介绍下:1. 首先在
Iconfont-阿里巴巴矢量图标库
上面将你需要的图标点击购物车按钮加入“暂存架”2.选择完所有要用的图标后“存储为项目”,给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目,获取在线链接,把里面的代码复制到CSS中。3. 在HTML中需要使用到图标时,使用iconfont类名。
里面写上你想用的图标下面的Unicode:4.然后你可以通过控制iconfont类的属性改变图标的样式,比如:就可以在页面中引用和修改了。官网中还列出了使用时候的兼容性问题及其解决方法:Page 2
这些图标也可以下载到本地使用。图标都加入暂存架后选择“下载到本地”,会得到以下几个文件:浏览器打开demo.html可以看到每个图标的Unicode,把iconfont.css里的代码复制到css里面,把下面四个文件放到css可以引用到的文件夹里就可以了。下载使用的一个缺点是添加图标的话要重新把所有图标再下载一遍覆盖原来的文件,如果是在线链接只要重新生成一次链接就好了。For icon creation and uploading, please refer to the document provided by the official website:
Page 1
The official website does not explain the download and use of icons very clearly, so here is a brief introduction:1. First, click the shopping cart button on
Iconfont-Alibaba Vector Icon Library
to add the icons you need to the "temporary shelf" 2. After selecting all the icons you want to use, "Save as Project" and give it a name. Then find this project in "Icon Management"-"Icon Application Project", get the online link, and copy the code inside to CSS.3. When you need to use the icon in HTML, use the iconfont class name.
Write the Unicode below the icon you want to use: 4. Then you can change the style of the icon by controlling the properties of the iconfont class, for example: You can reference and modify it in the page. The official website also lists the compatibility issues and solutions when using it:Page 2
These icons can also be downloaded to local use. After adding all icons to the temporary storage shelf, select "Download to local", and you will get the following files: Open demo.html in the browser to see the Unicode of each icon, copy the code in iconfont.css into css, and put the following four files into a folder that css can reference. One disadvantage of downloading is that if you want to add icons, you have to download all the icons again and overwrite the original files. If it is an online link, you only need to regenerate the link once.