[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]**作業：**網上找一套字體，把字體引進來。