CSS 字體圖標(biāo)是指使用字體文件中的icon圖形作為圖標(biāo),而不是使用圖片。這種方式具有減少HTTP請求、可縮放、易于修改顏色等優(yōu)點。下面將介紹如何使用 CSS 字體圖標(biāo)。
@font-face { font-family: 'myFont'; src: url('myFont.eot'); /* IE9以下版本 */ src: url('myFont.eot?#iefix') format('embedded-opentype'), /* IE9只識別embedded-opentype格式 */ url('myFont.woff') format('woff'), /* Firefox, Chrome, Safari, Opera */ url('myFont.ttf') format('truetype'), /* Firefox, Chrome, Safari, Opera */ url('myFont.svg#myFont') format('svg'); /* iOS */ font-weight: normal; font-style: normal; } /* 自定義字體圖標(biāo) */ .myFont-icon:before { font-family: 'myFont'; content: '\e001'; /* 16進(jìn)制unicode編碼,可自行修改 */ }
上述代碼中,首先定義了一個@font-face規(guī)則,用于定義自定義字體文件的屬性。其中必須指定font-family、src屬性,而其他屬性常見的還有font-weight、font-style等。
在自定義字體文件定義好后,接下來可以使用:before偽元素來為指定類名的元素添加字體圖標(biāo)了。其中,content屬性的值是16進(jìn)制的unicode編碼,可以在字體文件中找到相應(yīng)編碼對應(yīng)的圖標(biāo)。
最后,在HTML代碼中添加使用自定義字體圖標(biāo)的元素即可。類名為.myFont-icon,i標(biāo)簽可自行替換成其他標(biāo)簽。這樣就可以成功使用 CSS 字體圖標(biāo)了。