常見字體圖標庫——font-awesome

本文轉載自查看原文 2019-08-31 20:58 644 插件

1.簡介

FontAwesome一種帶有網頁功能的象形文字語言，並收集在一個集合里。字庫中有675個圖標，只支持英文搜索，中文地址：http://www.fontawesome.com.cn/

2.使用方法

（1）在主頁上下載最新版，壓縮文件。

（2）不用修改文件名，將文件解壓后，放到項目中

使用 CSS

復制 font-awesome 目錄到你的項目中

在<head>處加載font-awesome.min.css如下。

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

使用 Sass or Less

使用 LESS or SASS 來個性化自定義Font Awesome 4.7.0

復制 font-awesome/ 目錄到你的項目中。
打開你項目中的 font-awesome/less/variables.less 或 font-awesome/scss/_variables.scss 然后編輯 @fa-font-path 或 $fa-font-path 變量來指定字體目錄。
```
@fa-font-path: "../font";
```
字體的路徑是相對於你CSS目錄的。
如果你使用一個靜態編譯器，請重新編譯你的 LESS 或 SASS。

當你已經知道如何開始使用Font Awesome之后, 你就可以用<i>標簽包裹起來，用到你網站的任何地方。這里的一些例子也是來自於 Bootstrap文檔.

（3）引用圖標

你可以通過設置CSS前綴fa和圖標的具體名稱，來把Font Awesome 圖標放在任意位置。Font Awesome 被設計為用於行內元素（我們喜歡用更簡短的<i>標簽，它的語義更加精准）。

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

例如: 默認圖標如果您修改了圖標容器的字體大小，圖標大小會隨之改變。同樣也適用於顏色，陰影，陰影等其它任何CSS支持的效果上。

（4）改變圖標大小

為了增加圖標大小相對於它們的容器, 使用 fa-lg (33% 遞增), fa-2x, fa-3x, fa-4x, 或 fa-5x classes.

<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 <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x