今天想為大家介紹一下一個純CSS控制的icon系列.在設計網頁時我們經常都會用到很多不同的icon,例如不同方向/形狀的箭頭:
以前要做這類型的icon時都會用圖片(jpg, gif等),但現在已經有一些很聰明的善心人把這些icons聚集起來,讓網頁設計師只要用CSS就可以在網頁上加入這些簡潔專業的icons!
今天就讓我為大家介紹一下怎樣使用這些免費資源吧!
這個資料叫做font awesome,此為官方網頁.
下載及安裝:
1. 進入官網後,直接點擊Download,就可以下載最新的icon檔.
2. 打開zip檔後直接按Ctrl + A然後把所有檔案拉到一個新的資料夾.
3. 資料夾裡就會多出一個font-awesome的資料夾.
4. 打開會看到4個資料夾 (css, fonts, less和scss)
5. 最後就是把這些資料夾移到網頁的根目錄,把網頁其他的css檔都放在css的資料夾裡就完成前置動作了.
使用方法:
1. 在html檔的<head>裡加入這串:
<link href="css/font-awesome.min.css" rel="stylesheet">
2. 在想使用icon的地方加入這句:
<i class="fa fa-chevron-right"></i>
例子:
如果我想在網頁上寫出一個文字連結,然後在後面加上一個右箭頭,可以寫成:
<a href="http://www.gamer.com.tw" target="_blank">巴哈姆特 <i class="fa fa-chevron-right"></i></a>
創作內容
Font Awesome: 網頁專用icons
CSS教學 (6)