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

 

 

 



相關文章

刪除 wordpress 自動產生的 p 與 br 如何刪除 wordpress 自動產生的 p 與 br呢?如果有自己架站的話就知道當我們想要用文字編輯器來撰寫自己的版面的時候總是會莫名其妙生出 p 或是 br 導致排版亂掉。當遇到這總情況的時候總是...
Slider and Carousel 幻燈片( 新增 Swiper API ) 今天要跟大家介紹幻燈片的小工具,幻燈片可以說是讓網頁瞬間升級最方便的功能之一了!如果能夠自己寫當然是最好的,但是如果沒有什麼基礎又想做出幻燈片的功能?推薦幾個開放原始碼的網站給你們參考~就能擁有厲害的...
CSS selector 選擇器     今天要介紹的主題是CSS選擇器,很多時候我們會寫css但是對其選擇器代表的意思卻不是非常了解,我們可能知道  "." 代表 class 或是 "#" 代表 id ,但...
HTML5 Video & Fullscreen Video 如何製作全螢幕影片?...   今天要和大家介紹 Video HTML 標籤常用的屬性以及一些時常看到全螢幕影片(Fullscreen Video)當成背景的炫泡作法喔~   要匯入一個影片...