[TOC] >[info]传统很多web页面是的图标都是通过图片来实现，把多个小图标做在一张图片上，然后用定位的方法来显示相对的位置，而最近流行的图标字体，替换了传统的方式，使得咱们的web开发更容易，方便，图标字体都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。 **实例**  ## 一、下载字库文件 该类图标类似于特殊文字，需要有对应的字库文件支持， 所以第一步我们应该获得该网站图标的字库文件。 打开网站源代码，找到css文件，在里面搜索并下载后 缀为eot、svg、ttf、woff的字库文件 ## 二、添加CSS控制代码 在css中添加以下代码，其中蓝色的部分分别是四个字库文件的路径。 ~~~ <style type='text/css'> @font-face { font-family:'iconfont'; src:url('iconfont.eot'); src:url('iconfont.eot?#iefix') format('embeddedopentype'),url('iconfont.woff') format('woff'),url('yhd/iconfont.ttf') format('truetype'),url('iconfont.svg#uxiconfont') format('svg'); } </style> ~~~ ## 三、控制html元素 在html中加入具体符号的特征码即可。 一定要给该标签加 font-family: "iconfont" 属性。 ~~~ <span style='font-family: 'iconfont';'>&#xf0007;</span> ~~~ >[danger]**作业：**网上找一套字体，把字体引进来。