有单色图标和彩色图标

当我们选择好了一组之后点击进去然后鼠标放到某个图标字体上之后,会出现三个选项按钮

具体意思如下:

其中这里的直接下载就是直接把这个图标当成文件图片的形式下载到本地进行使用,

支持svg、ai、png

但是这样使用太麻烦相当于图片一样了我们还是需要下载它的图标字体格式

因为阿里巴巴矢量图标库它这里是以项目为一个单位,所以我们添加的图标要打包成一个项目给我们使用!

然后自定义新建一个项目名称,

在打包解压出来的文件中有一个叫demo_index.html的文件

你可以打开它里面全部都是你刚刚所添加的图标字体和具体的使用方式

并且它这里提供了三种使用方式:Unicode实体编码方式、FontClass类名称调用、Symbol

这里我就以Unicode实体编码方式、FontClass类名称调用方式演示一下

Unicode实体编码方式调用

支持按字体的方式去动态调整图标大小颜色等等。

默认情况下不支持多色直接添加多色图标会自动去色。

font-face

url(iconfont.woff2?t1706238093360)

format(woff2),url(iconfont.woff?t1706238093360)

format(woff),url(iconfont.ttf?t1706238093360)

format(truetype);

}也可以直接把iconfont.css文件通过link标签引入到我们的页面中

link

hreficonfont/iconfont.css然后我们就可以使用了

调用方式

classiconfontUnicode实体编码/span这里在标签中一定要加上class为iconfont才有效果

举个栗子

相比于Unicode语意明确书写更直观,可以很容易分辨这个icon代表什么意思!因为使用

class

其实如果你仔细打开观察一下iconfont.css这个源码文件你就会知道其实里面就是对Unicode的有种封装

调用方式

icon-xxx/span在文档页面中挑选相应图标并获取类名应用页面元素就可以了!

举个栗子

center;}#content.icon-shujuzhanshi{color:

yellow;font-size:

12px;}#content.icon-xiangouhuodong{color:

pink;font-size:

14px;}#content.icon-pingfen{color:

16px;}#content.icon-dianpukanbanmoren{color:

blue;font-size:

18px;}#content.icon-youhuiquan{color:

green;font-size:

20px;}#content.icon-XyuanhuodongD{color:

red;font-size:

icon-dianpukanbanmoren/spanspan

classiconfont

并且你也可以通过CSS去自定义他们的颜色和大小可以说非常方便!

阿里巴巴矢量图标库还是很不错的但是缺点可能就是版权问题,如果你是学习那应该没什么问题但是如果是商用那么最好在使用这些图标之前先咨询一下作者以免版权纠纷!

这一点我个人感觉确实是没有FontAwesome做得好,搞得不清不楚的真麻烦!

嘿嘿嘿~~