一直都在使用Iconfont-阿里巴巴矢量圖標庫中的圖標,可是總歸是不全的,因此會去其它](www.iconfont.cn/)中的圖標,可是總歸是不全的,因此會去其它地方)css
網站下載圖標,那麼如今就會有多份圖標文件,咱們該如何去合併它們再應用到項目中去呢?chrome
這個網站IcoMoon能夠將.svg
的字體圖標文件解析出來,並生成新的字體文件包。](icomoon.io/app/#/selec…)能夠將.svg
的字體圖標文件解析出來,並生成新的字體文件包。)bash
操做流程以下:app
1.點擊左上角的Import Icons
導入圖標svg
2.選中要保留的圖標字體
3.點擊右下角的Generate Font
網站
4.生成成功後點擊Download
便可url
由於項目中以前一直使用Iconfont
的圖標文件,因此爲了避免更改大量代碼,咱們須要將IconMoon
導出的字體圖標spa
改爲Iconfont
的類型,其實很簡單,以下:firefox
1.將IconMoon/fonts
的四個文件所有重命名爲iconfont
。
2.將IconMoon/style.css
中的圖標部分所有複製,替換掉iconfont.css
中的圖標部分。
圖標部分的代碼形式
.icon-dingdan1:before {
content: "\e600";
}
複製代碼
3.將Iconfont
以前的woff
改成url('iconfont.woff?t=1532329070422') format('woff'),
<pre style="margin: 8px 0px; color: rgb(207, 191, 173); font-family: 宋體; font-size: 1rem; background-color: rgb(39, 40, 34);">@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1532329070422'); /* IE9*/
src: url('iconfont.eot?t=1532329070422#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1532329070422') format('woff'),
url('iconfont.ttf?t=1532329070422') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1532329070422#iconfont') format('svg'); /* iOS 4.1- */ }</pre>
複製代碼