Font-Awesome,讓你加入ICON只需要一行就夠!

0
57

最早一開始要在網頁加入icon,要引用img,除了要裁圖還會怕和文字行高沒有對齊,說實在的麻煩很多,加一個icon還好,若是像導航這種,一次加都好幾個,光裁圖.調整,可能就會用老半天。

那還好,現在有Font-Awesome,當設計沒有特別要求時,就可以直接使用它,快狠準來解決問題!

 

這邊只要4步驟就能完成,我們往下來看看吧:

1.首先,我們先去官方網站下載他的最新版本,如圖:

http://fontawesome.io/

fontawesome_1

 

 

2.然後我們把檔案解壓縮,應該會看到下面的4個檔案,

那我們要的就只有css和fonts這兩個檔案夾,並拷貝這2個到你的專案目錄下面

2016-12-18_114729

 

3.接著,我們在<head></head>裡面,加入此段css語法,並修改為你的專案路徑:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

 

4.最後,我們只需要在<body>裡面,加入此段html語法:

<i class="fa fa-camera-retro"></i>

就會產生你要的圖型,那圖型樣式官方就有百百種,基本上是很夠用

更多圖型可看:http://fontawesome.io/icons/

選一個你自己喜愛的吧!

 

以上應該就能產生圖型了,那額外小教學一下,若要調整圖型大小,直接加上相對應class即可

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x

fa-lg  ,fa-2x ,fa-3x .. 以此類推 ,可調整圖型大小。

 

那若對Font-Awesome有興趣的話,這裡有更多操作案例,可以來看看:

http://fontawesome.io/examples/

 

 

frankbite-關注UI設計/前端/網頁,如果您喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將為您提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03