Select Page

Font Awesome – 輕輕鬆鬆的在文章中置入小圖示

Font Awesome – 輕輕鬆鬆的在文章中置入小圖示

Font Awesome

使用 WordPress 架設網站時,有時候為了版面或是文章的需要,常常要插入一些大小圖示,來豐富版面或是幫助文章的閱讀。在以往的作法是直接下載這些大小圖示,放在自己架設的網站主機上,在建置網站或是編輯文章的過程中置入這些小圖示的檔案,將這些小圖示當作一個個的圖檔來處理,如果需要不同尺寸的圖示,就建置不同尺寸規格的圖檔。今天不需要再這麼麻煩的準備圖檔了,透過CSS式樣的編輯,可以輕輕鬆鬆的在文章中置入小圖示,大小還可以隨意調整,呈現的效果品質不受影響,非常適合經常需要在文章中入小圖示的朋友使用。

1. 首先連上fontawesome.io 網站(圖一)。

Font Awesome
(圖一)開啟網站網頁

 

2. 接著我們點選Get Started(圖二)來到開始使用的網頁,使用這個圖示式樣的方式有很多種,第一種方法是最簡單的,也是今天max要示範給大家看的,這個方法連檔案都不需要下載。開啟佈景主題的header.php檔案(同樣的還是建議先複製header.php檔案到子佈景主題資料夾內,然後再對它作編輯的動作),在<head></head>之間置入這一行字串:

這個動作是讓網頁先載入font-awesome.min.css式樣,這樣才可以開始使用它提供的各種圖示。

Get Started
(圖二)Get Started

 

3. 接著我們要開始使用,首先選擇需要的圖示(圖三),網站是有許多分類,包含了很大多數的圖示,選定後將它的式樣編碼記住,文章我們以WordPress 圖示來做範例。如果透過分類尋找覺得慢,可以在搜尋欄直接輸入搜尋。

search WordPress icon
(圖三)搜尋 WordPress 圖示

 

4. 來到搜尋WordPress結果的網頁(圖四),要使用這修些小圖示的式樣,它的標籤語法很簡單就是,所以可以看到WordPress 圖示的式樣語法是:

圖示顯示的效果如(圖五)。

5. 以上完成。

WordPress 圖示語法
(圖四)WordPress 圖示語法

 

WordPress 圖示展示
(圖五)WordPress 圖示展示

 

6. 有興趣的朋友還可以更進一步的研究網站上相關的文件,搭配自己的式樣設計,變化出更多樣的圖示設計。

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

網站架設

WordPress 虛擬主機免費安裝設定