2017年11月9日 星期四

[研究] [CSS] Font Awessome v4.70 圖示性字和 CSS 工具箱

[研究] [CSS] Font Awessome v4.70 圖示性字和 CSS 工具箱

2017-11-09
2017-11-13 更新

Font Awessome v4.70 英文網站 (官方?)
http://fontawesome.io/



Font Awessome v4.70 簡體中文網站 (官方?)
http://fontawesome.dashgame.com/

Font Awesome 是標誌性字體和CSS工具包 (The iconic font and CSS toolkit)

Font Awesome 為您提供可縮放的向量圖示,您可以使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支援的效果。

點上方 Get Started,可以看安裝教學
http://fontawesome.io/get-started/

安裝:

把檔案下載後,放到想要放置的目錄。
只要在網頁 <head> 和 </head> 之間加上下面即可
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

或根據下面這篇,直接連遠端 (連遠端,則網站必須能連上 Internet,能連上遠端的網站)

1、國內推薦 CDN:
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
2、海外推薦 CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

點 Examples 有範例,很簡單,不多說。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

</body>
</html>



********************************************************************************

Visual Studio 2017 v15.4.3 的 NuGet 也可提供 Font Awessome v4.70 的安裝






Content 目錄多了
font-awesome.css
font-awesome.min.css

fonts 目錄多了
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
FontAwesome.otf








(待續)

沒有留言:

張貼留言