[TOC] >[info]传统很多web页面是的图标都是通过图片来实现,把多个小图标做在一张图片上,然后用定位的方法来显示相对的位置,而最近流行的图标字体,替换了传统的方式,使得咱们的web开发更容易,方便,图标字体都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。 **实例** ![](https://box.kancloud.cn/11eae3321506f1f3d40f4bdd0a399589_195x466.png) ## 一、下载字库文件 该类图标类似于特殊文字,需要有对应的字库文件支持, 所以第一步我们应该获得该网站图标的字库文件。 打开网站源代码,找到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]**作业:**网上找一套字体,把字体引进来。