今天來試試引入字型取代部分常見的 icon 圖片。
本篇文章的 demo code 可以在 這邊 查看:
本次安裝的是常見的 fontawesome
裝完之後檢查一下 package.json
多了一行
"@fortawesome/fontawesome-free": "^5.13.0",
這樣就是安裝成功了。
參考資料
Font Awesome
接下來要引入字型，
// router.js
注意是 f o r t 喔(不是font)
如果同時也有使用比較舊版的 fontawesome(ex. 4.7版本
all.css 的 font-family 記得給他多加一個 fontawesome
ex.
.fas {
font-family: 'Font Awesome 5 Free',fontawesome;
font-weight: 900; }
否則有些原本的字型會因此出不來。
只是經驗談，本篇文章沒有，所以就不用加。
接著來測試字型是否引入成功。
新增 src/views/fontTest.vue
<div class="testfont">
<h2>fontawesome test</h2>
<i class="fas fa-cat"></i>CAT
<i class="fas fa-dog"></i>DOG
<i class="fas fa-cloud"></i>CLOUD
</div>
在header新增頁面連結
// header.vue
<div class="somecode">
<router-link to="/fontTest">fontTest</router-link>
</div>
router.js 記得也要加上
routes: [{ path: '/fontTest', component: fontTest }]
如果覺得每次新增頁面都要多這麼多行有點煩，
也可以使用 require 的方式:
這樣寫就不用 import 了
完成引入之後視個人喜好加點樣式就可以打開頁面看看效果了。
// src/assets/style/style.css
用字型代替圖片很方便的優點之一就是樣式就跟調整一般字型一樣，
不管顏色或是大小都可以直接透過 css 做調整。
雖然 fontawesome 圖片齊全，
但也難免會有一些時候我們想要使用自己的圖片，
接下來來試試把自己想要的圖片做成字型。
這邊是找到網站幫忙把圖片轉字型，
不過看了幾個，都是限定使用 svg 檔，
所以先來找個可以直接線上轉 svg 的網站吧 => convertio
網站說明很清楚：
上傳檔案 → 選擇要轉檔的型態(svg) → 然後下載。
用網路上抓的一張小豬圖片來當範例。
丟上網站，把svg檔案下載回來。
我是使用icomoon把圖片轉字型。
注意：圖片如果是白色的，背景不能是透明，否則轉出來就是一片白。
（BY 被坑了整整半小時找不到問題的我）
點右上角的 icomoon App 進去之後，
點左上角的 Import Icons 鈕，再選擇已繪製好的svg檔。
然後選擇右下角 generate fonts ，
等幾秒後，一樣是在右下角，點選 download 把字型包下載回來，會是個 zip 檔。
解壓縮之後把 fonts 資料夾與 style.css 放到專案裡面即可。
記得在 router.js 中引用壓縮檔裡的 style.css
這邊我改成 icomoon.css 以跟其他檔案區別，
注意相對路徑。
以我的專案為例，
assets 資料夾目前的檔案目錄為
assets
｜___fonts
｜___images
｜___style
｜___icomoon.css
｜___style.css
所以 icomoon.css 裡面引用檔案的路徑就要修正為 '../fonts/'
src: url('../fonts/icomoon.eot?ico1jp#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?ico1jp') format('truetype'),
url('../fonts/icomoon.woff?ico1jp') format('woff'),
url('../fonts/icomoon.svg?ico1jp#icomoon') format('svg');
接著一樣在 fnotTest.vue 加入 icon
<div class="somecode">
<i class="icon-pig"></i>PIG
</div>
頁面有正常顯示的話就是成功了。
另外這邊有個小技巧可以判斷到底是沒有引入成功還是只是 class 錯誤：
如果是根本沒有引入成功的話，會直接空白、不顯示任何東西，
如果是引入了，但是 class 有錯誤的話用 F12 或者 ctrl + shift + C去遮 (chrome) 會得到 content:'\XXXX'
而且原本應該出現圖片的地方會是一個方框。
字型的部分大致就是以上這樣子了。
參考資料
網設必備《IcoMoon》icon轉Font整合平台要多少下載多少