东拼西凑完成一个“前端框架”(2) - 字体图标

前言

还记得以前开发的项目目录下都会存放一大堆图标文件，难以维护，同时图标和字体的对齐也是一个麻烦事儿；

下面简单列出字体图标的优劣势，内容摘自图标字体的优缺点和使用

优势

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。

• 灵活性：不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！

• 兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。
  相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种情况。

劣势

• 图标字体只能被渲染成单色，或者是CSS3的渐变色
• 版权上也有着对应的限制，当然还是有很多免费的图标字体可以供我们下载。
• 当自己创作图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高

目前个人推荐的图标库有 font-awesome、Bootstrap Glyphicons、Ionicons、themify-icons；

假如你想自定义一些字体图标，那么强力推荐阿里巴巴的 Iconfont

Start

iconfont

iconfont的使用就不赘述了，请移步Iconfont官方帮助文档，继续我们的“前端框架”，在Iconfont的项目里加入了一些图标：

image.png

然后复制链接在浏览器中打开：

image.png

新建一个icon.css文件，把代码粘贴进去；
新建一个页面，代码：

预览效果

image.png

源码地址

https://github.com/LaosanShang/ls-admin-frontend