[ 工具分享 ] Font Awesome ( icon font )

標籤: , ,

今天要和大家介紹 Font Awesome 這個工具的使用方式,他提供一些免費的 icon 和付費的 icon 可以使用,就目前為止我覺得他提供免費的素材還蠻夠用的。現在就要來教大家如何使用這項工具囉!

 

先來看看它的用途

可以看到我紅框圈起來的地方,那個就是 icon font 的功能,可以快速提供小圖示使網站更完整明瞭。

了解他的功能以後,就來了解這個工具如何使用吧~

使用這個優點

1. 方便控制圖示大小,控制的方式就是文字的大小。

2. 簡單、快速和輕便。

 

 

STEP1

把 link 貼入你的網頁 head。

 

 

STEP2

在他們的 官方網站 選擇你要 icon 也可以打關鍵字(要英文喔!)。

 

 

STEP3

複製我紅框圈起來的代碼到你的網頁。就可以看到這個圖案囉!

可以看到上圖他提供這個圖案在不同背景大小呈現的樣子,還有 SOLID 不同的樣子可以做選擇,如果是我想做點變化的話可以拿他這個來做 Hover 的效果,這樣是不是非常方便快速就達到一個變化的感覺了呢 XDDD

 

 

現在市面上有很多 icon font 的提供而今天介紹的是 Font Awesome 的希望大家喜歡今天的工具分享,感謝閱讀。

 

 

 



相關文章

網頁滑動式手機菜單 (類似APP菜單)   今天要來和大家分享滑動式的手機菜單如何達成,要製作這個功能需要的是CSS和JS概念。 這個菜單類似手機APP的菜單顯示的方式,這樣子的菜單形式使用在網頁上是相當符合使用者經驗...
如何寫SCSS #1-1 上篇跟大家提到如何開始寫SCSS的時候有推薦一個工具,但是其實有更好的編譯方式,只要下載 VS code 的外掛就可以馬上編譯。 這款外掛就是:Live Sass Compiler 下載好VScod...
Loading 製作載入中畫面 (8/9更新:Safari 載入問題)...   此篇文章要教大家如何製作 Loading 畫面,在瀏覽網站的時候有時候會看到有些網站有 "過場畫面" ,當整個網頁載好時才會讓使用者看到完整的畫面,這樣有什麼好處呢?可以讓網頁更有...
如何自訂義動畫 Animate On Scroll   上一篇有教大家基本的 AOS Animations 使用方式,這一篇要給有需要自訂義動畫的夥伴們所使用。   基本使用方式 連結支援: 滾動到此時執行動...