![[教學] 因為這個原因他放棄了Font Awesome!](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAa9mac37-k08ahUKfqu3cA_6Lr41rC1DMU0_ay-5a3RBFVxv6E7NqbKfFpYsQQsBFmB3TLr55lA5krqy_32m1VmYwMqmMDmwfZpAkNc7I1u8fKEgEANm2wrbnYHqC1DHzQ6ZhoyhBVM/s945/open-graph.png "[教學] 因為這個原因他放棄了Font Awesome!")
[教學] 因為這個原因他放棄了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一樣的引用方式
使用方法跟Font Awesome差不多
<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位址
修改後要記得更新css位址
結語
下面開始本次教學的技術總結
- 同學們可以根據個人口味添加圖標
- 圖標風格和大小最好相近, 否則視覺上會很突兀
- 編輯後要記得重新引用更新過的位址
About Sean Chaox
沒有留言:
張貼留言