iconfont引用方法
iconfont在一次做PPT的过程中的知道的一个设计常用的网站,进过一番的了解和学习,发现它是国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。是阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。
1.登录/注册账号
iconfont支持GitHub、阿里域账号(仅限阿里员工)、新浪微博三种账号登录。直接登录即可。
2.选择你想用图标并将它加入购物车
加入购物车之后你可以将它加入到你项目中去,也可以直接下载.png文件(此种方式一般为UI设计时用)
引用图标可有三种方式:Unicode、Font class、Symbol。
三种方式各有缺点,下文从这三种方式的优点、缺点和使用方法说起.
1.unicode方式:
unicode是字体在网页端最原始的应用方式
优点:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小(font_size),颜色(font-color)等等。
缺点:
- 因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
使用方法:
将下载好的iconfont图标的文件放到工程文件夹的目录下;
在代码中link进来,如果是小白注意路径的问题,如下;
<link rel="stylesheet" type="text/css" href="iconfont/unicode/iconfont.css"/>
// An highlighted block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>unicode引用方法</title>
<link rel="stylesheet" type="text/css" href="iconfont/unicode/iconfont.css"/>
<style type="text/css">
.iconfont{
font-size: 500px;
color: red;
}
</style>
</head>
<body>
<i class="iconfont"></i> <!--class="引入Unicode文件里面.css的文件名",
 是iconfont.css文件里面.icon-check-circle:before样式content的值-->
</body>
</html>
可以通过style样式的修饰,效果如下:
2.symbol方式
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
- 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
第一步:引入项目下面生成的symbol代码:
<script src="iconfont/symbol/iconfont.js"></script>
第二步:挑选相应图标并获取类名,应用于页面:
<svg class="icon-play">
<use xlink:href="#icon-play"></use>
</svg>
第三步:稍微加一点样式
<style type="text/css">
.icon-play{
font-size: 200px;
fill: currentColor;
color: red;
}
</style>
效果如下;
2.Font-class方式
Font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
直接上代码,以及效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fontclass用法</title>
<link rel="stylesheet" type="text/css" href="iconfont/fontclass/iconfont.css"/>
<style type="text/css">
.icon-smile{
font-size: 400px;
color: skyblue;
}
</style>
</head>
<body>
<i class=" iconfont icon-smile"></i> <!--iconfont icon-smile 为引入图标的文件名-->
</body>
</html>
效果如下;