[教學] 因為這個原因他放棄了Font Awesome!

別噓農場標題, 我只是很想用一次看看😂
Font Awesome有多好用我想用過的人都知道
免費, 使用簡單, icon多又好看
所以一直深受網頁設計者的喜愛

我之前也一直用這套, 不過在之前幾次更新中我把它從網站刪了
原因是大部分的icon我都用不到
但為了畫面上那幾個icon, 卻每次都必須載入整個css和字體檔
雖然說體積並不算太大, 但用不到的東西再小都是浪費

要解決這問題最直覺的方法就是刪掉用不到的部分
不過慢慢刪用不到的code, 大部分人應該都跟我一樣沒這種耐心
所以有了像fontello這樣方便的網站, 能只下載用到的部分
但下載之後還要自己維護, 還是讓人覺得有點麻煩
最後我找到IcoMoon和這次要介紹的iconfont
這兩個網站都能在線上選自己想要的圖標並打包成css
下面我稍微比較一下兩個的差別

IcoMoon iconfont
iconpack 多,有些要付費 更多,素質不一
缺點 免費版功能少 搜尋功能有點差,中國網站

或許有些人會覺得這類的精簡體積應該不至於差太多
所以附上Font Awesome跟iconfont在css方面的差異

不要去算, 用身體去感受
應該可以很明顯感覺到差異
接下來介紹要如何使用


Step #1 iconpack



點進網站後可以看到有很多套圖標庫
可以慢慢選自己想要的, 也可以直接在右上方搜尋關鍵字(e.g. facebook)
大部分都能找到跟原本Font Awesome很類似的(畢竟是中國網站)

Step #2 icon


找到喜歡的icon後, 點購物車圖案


然後添加到項目, 沒有的話直接新增一個

Step #3 css



進入項目, 切換成font-class, 點生成代碼可以得到css
跟一般的css一樣的引用方式
<link href="//at.alicdn.com/t/font_1005728_tqigvettnl.css" rel="stylesheet"></link>

使用方法跟Font Awesome差不多
<i class='iconfont icon-facebook'/>

Step #4 edit

照上面步驟沒意外的話就能愉快的使用
但人生就是會充滿意外
由於圖標庫不統一, 所以每個icon大小可能不會一樣
這時就要自己手動編輯一下


可以調大小, 變色, 改名稱...etc.
修改後要記得更新css位址



結語

下面開始本次教學的技術總結
  1. 同學們可以根據個人口味添加圖標
  2. 圖標風格和大小最好相近, 否則視覺上會很突兀
  3. 編輯後要記得重新引用更新過的位址
iconfont的技術總結完畢

延伸閱讀
About Sean Chaox
Me

I'm soulless, so I'm recompiling my soul
I'm lifeless, so I'm enriching my life
I'm homeless, so I build this House
I am Sean, welcome to my House

沒有留言:

張貼留言