2021/01/04

Feather 羽量級Icon Font | 前端


 

最近工作上學到一些小東西覺得還蠻實用的,又怕之後忘記,所以老樣子,寫起來XDDD


這次介紹的是Feather,他一套羽量級級的Icon Font,比起主流的fontawesome來說,精簡了許多,只有留下兩百多個較常用的Icon

使用方式也蠻簡單的,雖然官網寫的有點多,但大概就是分三步驟


STEP 1. 安裝  

看是安裝或是使用CDN方式都可,我是使用CDN,官方提供兩個,擇一即可~

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>


STEP 2. 加上JS 

以下這段要記得貼

<script> feather.replace()</script> 


STEP 3. 選Icon

ICON的預設HTML格式為

<i data-feather="circle"></i>

只要將circle替換成要使用的Icon名就可以

Icon在首頁就有完整列表可以使用,不過設計有點怪,點到名字都變下載SVG,有點不方便XD


Feather在使用上是真的蠻簡單好用的,如果網站需求不大,可以考慮使用看看!~



Related Posts:

  • reset你的reset.css...unreset.css | 前端好饒口的標題呀🤣reset.css是一個網頁常用的CSS重置方式,他把標準的HTML TAG所自帶的屬性全部拔掉,減輕了不少設計師的痛苦,這一用也不知道多少年了,真的是一個很棒的方法!這兩天在討論區看到一個有趣的問題,有人在問怎樣只有網頁的某一部份拔掉reset.css的效果,讓他還原到初始狀態,… Read More
  • Sublime Text個人常用套件 | 前端 在網頁設計的這條不歸路上,最早接觸的編輯軟體應該跟大多數七年級生一樣都是Frontpage,想當初我們還是從IE內建的版本開始使用,後來則出現了Dreamweaver,隨著Frontpage改名(現在也消失了?)後,也就變成Dreamweaver獨佔天下好一陣子。 近幾年,純文字編輯器又開始夯了… Read More
  • Feather 羽量級Icon Font | 前端 最近工作上學到一些小東西覺得還蠻實用的,又怕之後忘記,所以老樣子,寫起來XDDD這次介紹的是Feather,他一套羽量級級的Icon Font,比起主流的fontawesome來說,精簡了許多,只有留下兩百多個較常用的Icon使用方式也蠻簡單的,雖然官網寫的有點多,但大概就是分三步驟ST… Read More
  • 設計師必備的TinyPNG 與TinyPNG4Mac套件 TinyPNG是一個老牌子線上壓縮圖檔的網站,雖然叫做Tiny"PNG",其實JPG也可以壓縮,效果都還不錯,對於會在意網站上圖檔K數的公司或外廣是很重要的工具!好用的老牌子TinyPNG線上一次可以最多20個檔案,單檔最大5Mb,如果你有較多檔案要一起壓縮,建議你到官網申請API金鑰,… Read More

0 意見:

張貼留言