使用阿里的字体库—iconfont
2016-03-24 本文已影响4580人
webCoder
由于之前的项目需要，所以使用的bootstrap的字体图标，但是项目越往后，越发现bootstrap的字体图标数量太少。之前很早就听说阿里的字体库，可以点击这里。本地尝试了一下，发现使用非常的简单。
-
首先，我们了解几个使用字体图标得好处：
1.如果设计是按照这个库里的图标来设计网页的话，那前端就能减少很大的切图压力；
2.字体图标可以通过设置font-size来改变大小，color改变颜色，font-weight改变粗细；
3.相对于图片，总的文件大小会小很多； -
其次，我们来看一下阿里的图标库有哪些字体图标：
pic1.jpg
- 我们该如何使用呢？
pic2.jpg
pic3.jpg
1.在网站中选择想要的字体图标，点击加入购物车（其实是完全免费的，不要被购物车图标吓着~），然后在顶部的购物车列表中批量下载到本地。
下载后，我们会得到这样一个文件夹：
pic4.jpg
- 在项目中引入图pic4中红色箭头标注的地方；
3.在自己的html中引入iconfont.css，然后在标签上指定iconfont的class，修改标签的innerText就可以实现成功调用，具体看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="iconfont.css">
<style>
.icon1{font-size: 20px;color: #f00;}
.icon2{font-size: 26px;color: #f06;}
.icon3{font-size: 30px;color: #000;}
.icon4{font-size: 30px;color: #000;font-weight: bold;}
</style>
</head>
<body>
<span class="icon1 iconfont"></span>
<span class="icon2 iconfont"></span>
<span class="icon3 iconfont"></span>
<span class="icon4 iconfont"></span>
</body>
</html>
4.innerText具体的值，如''可以参考下载文件后的demo.html中：
pic6.jpg
5.实现效果：
pic5.jpg
图标得大小、颜色、粗细都是可以修改的，就像控制字体样式一样，动手尝试吧~
