文章專區

網頁設計相關文章

IcoMoon──將icon轉成Font的方便平台

 在網頁設計上icon的使用是不可或缺的,一般是切成圖片,然而若是以文字形式呈現的話,不僅縮放都不會失真,還可以任意更換顏色,比svg檔更便利!而有個網站便是專門將svg轉換成文字檔,

IcoMoon :https://icomoon.io/app/#/select

不僅提供許多的現成圖示可以使用,還可以將自己繪製的icon放進來做轉換。

 

可以直接選擇想要使用的icon,選取到的會框起來

 

也可以直接將自己繪製的圖示放進來,點選左上方的「import Icons」,即可匯入

 

點選最右下角的「generate Font」轉成文字檔

 

將下載的檔案解壓縮後,只要將style.css和 fonts的資料夾放進自己寫的專案裡即可

 

點開demo.html會顯示你所下載的每個圖示的class名稱,實際套用時只要加進class裡即可

 

比如要套用上圖的icon-file-text的圖示,便可將 icon-file-text的class放進來,若要修改樣式可以新增class,如下圖的icon01、icon02、icon03,便是修改圖示的大小和顏色,因為是文字所以需用 font-size