在网页布局中有许多的小图标，这些图标都是由字体图标来进行实现的。
字体图标的产生
在早期这些字体图标也使用精灵图进行实现，但是精灵图也有其自身缺点：
- 图片文件还是比较大的。
- 图片本身放大和缩小会失真。
- 一旦图片制作完毕想要变更非常复杂。
此时，字体图标的技术就完美的解决了以上的问题
字体图标可以为前端工程师提供同一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点
- 轻量级：一个图标字体要比一系列的图像要小 。一旦字体加载了，图标马上就会渲染出来，减少了服务器的请求。
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
- 兼容性：几乎所有浏览器都支持。
注意：字体图标并不能代替精灵技术，只是对工作中图标部分技术的提升和优化。
字体图标的使用
字体图标的下载
字体图标可以去相应的图标网站进行下载，这里推荐两个网站：
这里以icomoon为例子，详情看pink老师的视频。
<iframe allowfullscreen="true" border="0" frameborder="no" framespacing="0" scrolling="no" src="//player.bilibili.com/player.html?aid=80149248&bvid=BV14J4114768&cid=137227873&page=256" style="width: 100%; height: 700px; magin: auto"> </iframe>字体图标的使用
根据以上视频下载好字体图标后，会得到一个.zip压缩文件。
将其中的fonts目录放到项目中。
然后将其中的style.css中的字体图标声明，复制到css的开头。
这里仍然以pink老师的视频为例子。
<iframe allowfullscreen="true" border="0" frameborder="no" framespacing="0" scrolling="no" src="//player.bilibili.com/player.html?aid=80149248&bvid=BV14J4114768&cid=137227892&page=257" style="width: 100%; height: 700px; magin: auto"> </iframe>标签：视频,精灵,字体,CSS,使用,下载,图标 来源： https://www.cnblogs.com/brokyz/p/16359063.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。