[iconmoon] 最好用的icon變成font產生器

現在不管是網站還是手機
到哪裡都可以看到icon圖標
一方面好看 一方面也有好UX
有許多的icon你一看就懂,例如
→ 選單
→ 放大
→ 地址
 
以前的做法 就是請設計師幫你做這些圖
還要做兩種圖噢 normal一個樣子 hover一個樣子
然後我可能有三個地方用到同一個icon 但大小卻不同
所以就要做6張圖 然後有一天 客戶想要改顏色或稍微放大2px
設計師就要打掉重做…就這樣無限循環
(光用想的就覺得好累…呼)

 

不過還好有iconfont解決了這個問題
什麼是iconfont? 簡單來說就是把icon變成字體(這不是廢話嗎)
讓你可以為所欲為的放大變色加陰影光暈
所以文字可以做到效果iconfont 都可以做到 因為他就是文字!

See the Pen GgJmJV by hannahpun (@hannahpun) on CodePen.


假如以上你早就知道了 那我們就可以來介紹iconmoon了
普遍大家常用的iconfont 不外乎是 Font Awesome ,  或是直接用 bootstrap內建的glyphicons
但你會發現 設計師的設計圖都不是找這兩者裡的icon
他們可能會找flaticon 這類專門做icon的網站或自己畫給你
那怎麼辦呢?
 
這是iconmoon出現的時候了
 
iconmoon

 

1. 選取

裡面有很多內建的icon 如果你喜歡就直接點一下(選取是黃色框)
若是設計師自己做圖 請他們提供svg擋
按紫色的import Icons 就可以import進來
iconmoon1

 

若不喜歡就刪掉(刪除是紅色框,記得先按一下上面那個垃圾桶)
iconmoon_delete
 

2. 編輯

最棒的編輯功能(藍色框)iconmoon_edit1

 

點了之後你可以在裡面旋轉,水平垂直翻轉, 移動, 放大縮小 超級棒的
 
iconmoon_edit2
 

3. 下載

完成之後只要按右下角的Gernerate Font/ Download 就完成啦
iconmoon_download
 

4. 使用

解壓縮檔案之後會看到很多檔案
demo.html 是參考用的(如下圖)
iconmoon_use2

 

真正用到的只有style.css跟fonts資料夾而已
所以你只要把這兩個檔案拖進你的專案

iconmoon_use1

 

然後在html裡<link rel=stylesheet type=”text/css” href=”style.css”>
就可以使用它啦
這時只要在任何地方加<i class=”icon-school“></i>就會出現

  • http://matrixki.com Mike Ko

    thanks!