前言
还记得以前开发的项目目录下都会存放一大堆图标文件，难以维护，同时图标和字体的对齐也是一个麻烦事儿；
下面简单列出字体图标的优劣势，内容摘自图标字体的优缺点和使用
优势
-
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少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文件，把代码粘贴进去；
新建一个页面，代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>首页-欢迎</title>
<link href="css/icon.css" rel="stylesheet" />
</head>
<body>
<i class="icon ls-icon-shrink-right"></i>
<i class="icon ls-icon-spread-left"></i>
<i class="icon ls-icon-user"></i>
<i class="icon ls-icon-password"></i>
</body>
</html>
预览效果
image.png
网友评论