如何使用font Awesome套用icon樣式

Posted on Edited on In Views: Disqus:

 

1.使用Font Awesome

假設我要show一個時鐘的icon，如圖

輸入以下網頁原始碼即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
    <div class="fa fa-clock-o">icon-time</div>
</body>
</html>

(1)先匯入font awesome樣式//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

我看目前官網font-awesome 4.7.0 還有提供另一種匯入方式，於<head> tag放置下列script

<script src="https://use.fontawesome.com/f0f865e1ff.js"></script>

(2)由Font Awesome官網查詢得知時鐘icon的class名稱為fa-clock-o

 

2.如果要把元件全部下載到本機執行時

(1)先把BootstrapCDN下載font-awesome.min.css下來

(2)建置網頁

我是使用VS2013IDE工具輔助建置網頁，如要使用別方式來建置都OK

網站RUN起來後發現時鐘的icon出不來

(3)至font-awesome.min.css檔尋找url路徑，

發現font-face的url路徑都指向為相對路徑，

這時候你應該知道從BootstrapCDN下載下來檔案裡的路徑為下載前的相對路徑，

知道哪裡錯了吧。

由於我們剛才在//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

路徑下載該CSS檔，因為url字串中 ../ 代表為上一層路徑，

所以 ../ 應替換為//maxcdn.bootstrapcdn.com/font-awesome/4.2.0

如下圖

改完後重新RUN網站，時鐘icon已出現

 

3.字元編碼

例如一個.icon-time樣式

    .icon-time:before {
        content: ""
    }

你會看到有一個亂碼字元，其實可以等於unicode的\f017

    .icon-time:before {
        content: "\f017"
    }

 

4.自己發展CSS樣式

我看過有人會仿照font-awesome的css來發展自己的樣式，

大至上要點有

(1)準備字體檔

(2)撰寫CSS

(3)在網頁裡套用樣式

 

5.利用NuGet安裝Font Awesome套件

(1)於專案按右鍵並點選Manage NuGet Packages

(2)於Browse收尋font awesome套件

(3)安裝後發現會新增下圖紅框的檔案

(4)NuGet也會修改到.csproj與packages.config檔，內容為

結論：安裝font awesome套件時NuGet也不會亂裝複雜的東西，

所做的動作相當於複製font awesome樣式檔到本機端，

頂多於專案檔註冊NuGet有裝了什麼東西而已。

 

参考資料：

相對路徑與絕對路徑

範例檔