以前一直用的是fontawesome字体,一直也就用它,觉得还比较齐全,偶尔有需要用到其他图标的时候,就会用阿里巴巴iconfont,在上面选择一个合适的图标下载一个png或者svg格式,如下图,单独引入也就是了。今天好好看了一下,发现以前真的是小看了这个字体库。
平时都是一个个下,如果要用一批里面的字体该如何做呢?follow me!
下载
进入官网,选择你需要的图标,“添加入库”
选择完毕后,点击上方的购物车图标
再点击“下载代码”即可
下载下来的如图
使用
其实下载的文件中包含了那个demo html文件,分别介绍了三种使用方式,阅读即可明白使用方法,讲的很清楚。
- symbol引用 :支持ie9+,可以使用彩色图标
- font-class 引用 :兼容性不错,支持ie8+,书写直观(这点很不错),不过本质还是字体,所以只能是单色图标,推荐
- unicode 引用 :兼容性最好(支持ie6+),其他都比不上font-class。
这里还是贴一下使用方式吧
font-class引用
使用步骤如下:
第一步:引入项目下面生成的fontclass代码:
1 | <link rel="stylesheet" type="text/css" href="./iconfont.css"> |
这里对应的font文件还是要和css放在同一目录
第二步:挑选相应图标并获取类名,应用于页面:
symbol引用
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
1 | <script src="./iconfont.js"></script> |
第二步:加入通用css代码(引入一次就行):
1 | <style type="text/css"> |
1 | <svg class="icon" aria-hidden="true"> |
unicode引用
第一步:拷贝项目下面生成的font-face
1 | @font-face { |
第二步:定义使用iconfont的样式
1 | .iconfont{ |
第三步:挑选相应图标并获取字体编码,应用于页面
1 | <i class="iconfont">& |