[ 工具分享 ] 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 的希望大家喜歡今天的工具分享,感謝閱讀。

 

 

 



相關文章

CSS和CSS3的差別?   怎麼說呢? CSS3和CSS本身不應該有區別,因為他們是同一個東西,CSS3是CSS的進化版,CSS3只是一個更新的版本還是有CSS為基底的,所以不可能說跳過CSS學CSS3...
判斷手機系統 為 iOS 或是 Android 今天要和大家分享一個JS語法,這個語法可以判斷手機的系統,在我們寫網頁的時候時常會遇到 iOS 和 Android 手機頁面長的不同的困擾,這時候就會覺得 iOS 很麻煩為什麼要這麼特立獨行,但是作為...
變數的命名方式與注意事項 #2 不知道大家在使用SCSS的時候有沒有想過,變數要怎麼命名比較好?好不容易有一這麼方便的變數功能當然要充分的利用。 這邊跟大家介紹一下以小女子目前寫SCSS的經驗,提幾點需要注意的地方與怎麼命名比較好...
快速製作 HTML 表格 (HTML Table) 今天要和大家分享一些工具,我覺得真的實在是太厲害了,不懂 HTML 也沒關西只要將試算表 ( Excel ) 的檔案輸出成 CSV 檔案即可快速產生 HTML表格。這樣看下來是不是覺得很厲害呢?現在 ...