本篇教程介绍了HTML+CSS入门之两种图标字体库，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

## 0. 前言
比较基础的图标加载：<img src="x.png">和块元素的背景background: url(./x.png).
页面多图标时，使用雪碧图（多个png压缩成一个png，定位来使用），减少图片所占空间。
大屏显示，为保证图标清晰度，可以使用svg格式的图片。svg是矢量图，直接更改svg代码中path的fill改变颜色。
可自编辑开源svg库 [//www.iconfont.cn/home/index](//www.iconfont.cn/home/index "阿里巴巴图标库")
图标字体库，图标被生成字体文件，通过class决定图标，font-size决定大小，color决定颜色。主要使用的是css中伪类：before、css3中的@font-face,因而继承了font的其他规则。
 @font-face    {        font-family: myFirstFont;        src: url('Sansation_Light.ttf'),             url('Sansation_Light.eot'); /* IE9+ */    }    div    {        font-family:myFirstFont;    }    适用：单色图标
## 1. Font Awesome
    class="fa fa-name fa-size fa-pull-left" 前两个必有
优点：开箱即用
缺点：扩展麻烦，项目加载过多无用图标
[//fontawesome.dashgame.com/](//fontawesome.dashgame.com/)
## 2. IcoMoon
    class="icon-name"
优点：易于扩展，包括自己团队做的svg图标可在官网生成相应的fonts文件
缺点：扩展更新，一旦出现问题，会影响项目其他图标的显示
[https://icomoon.io/app/#/select](https://icomoon.io/app/#/select)
## 4. 深度理解
扩展自己的图标库
1. 扩展.eot.svg.ttf.woff等相关字体库
2. 伪类
        .icon-name:before {            content: "\f003";        }

   

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！