首先給大家介紹三個網(wǎng)站
// 圖標庫焚鹊，選好自己喜歡的圖標下載 SVG 文件
iconfont
// 將 SVG 轉(zhuǎn)為字體文件
icomoon
// 將字體轉(zhuǎn)為 base64 碼
transfonter
iconfont 具體的操作
-
將需要的圖標添加至購物車
iconfont.png - 點擊下載素材法瑟，選擇 SVG 格式
// 這里提一下胚嘲，iconfont 這個網(wǎng)站也可以直接將圖標轉(zhuǎn)為字體下載责循，本文之所里利用 icomoon 網(wǎng)站生成字體是因為 iconfont 生成的圖標 css 類名不能自定義朽色，而且類名特別長看著不舒服??，原諒我的強迫癥，覺得麻煩的同學(xué)可以跳過 icomoon 這一步婆翔。
icomoon 具體的操作
-
將本地的 SVG 導(dǎo)入，點擊左上角的 import icons
iconmoon.png -
點擊右邊的菜單欄掏婶，選擇 select all
iconmoon_select.png -
點擊底部的生成
iconmoon_create.png -
這一步就是我為什么選擇這個網(wǎng)站進行字體文件生成了啃奴，點擊左上角的配置 preferences
iconmoon_preferences.png -
配置導(dǎo)出的字體名稱 和 class 開頭名稱
iconmoon_name.png -
download
iconmoon_download.png
transfonter 具體的操作
-
添加字體文件，并注意下面的配置气堕，添加完成后點擊 convert 轉(zhuǎn)換
transfonter.png -
轉(zhuǎn)換完成點擊 download 下載
transfonter_download.png
最后，注意看
- 打開從 transfonter 下載下來的包畔咧，里面有一個 stylesheet.css 的文件茎芭，打開復(fù)制里面的代碼；
-
粘貼到從 icomoon 下載的最外層的 icon.css 中誓沸，把圖片中框出來的替換掉梅桩；
code.png - 然后你就可以把 icon 拷走盡情玩耍了；
<i class="icon-add"></i>
過程稍微有點復(fù)雜拜隧，不過玩兒過一次就好啦宿百；
