字體很棒6：完整評論

字體很棒是可擴展矢量圖標的集合。可以使用CSS屬性格式化圖標，設置其顏色，大小，陰影等。字體版本5.5.0包括605個圖標。

1如何安裝字體很棒

方法1。

通過將以下代碼添加到 部分：

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

連接字體後，您可以使用網站上的圖標。

方法2。

從字體上下載字體真棒。解開存檔並將兩個文件夾從檔案服務器上傳到站點服務器-CSS和字體。如果您的網站上已經有具有此類名稱的文件夾，那麼您只需要向其添加從下載文件夾的文件即可。

您可以使用該文件的完整或縮小版本：

<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">

2如何使用字體真棒圖標

圖標可以通過兩種方式添加到網頁中：通過為<i> 和<span> elements, 或者by adding them to the desired element using the :before, :after pseudo-elements 和the appropriate value of the content property.

  <i class="fa fa-home fa-fw"></i> li：{content：“ \ f015”;/ *添加家族圖標 */font-fomily：fontawesome; color：#aaaaaa; margin-right：10px;}

1個標準圖標

字體Awesome旨在與內聯元素一起使用。為了添加圖標，您首先需要將FA類設置為<i> 或者<span> 元素。

要在元素之前或之後添加所選圖標，一個空<i></i> 或者<span></span> 元素被添加到分配圖標類別的元素中，以及擴展樣式的附加類。

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

2個大圖標

為了增加圖標相對於其容器的大小，請使用FA-LG（增加33％），FA-2X，FA-3X，FA-4X，FA-5X類。

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

3個固定寬度圖標

Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation 或者lists on the site.

  <ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> 家</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> 圖書館</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> 申請</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> 設置</a ></li></ul>

4個圖標列表

使用FA-UL和FA-LI類代替默認的子彈<ul>…</ul> 項目符號列表。

  <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>項目清單</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>項目清單</li> <li><i class="fa-li fa fa-square"></i>項目清單</li></ul>

5個框架圖標和報價

Use the fa-border class to set the border for the icon. The pull-right 和pull-left classes will add quotes to the text.

  <p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem Ipsum Dolor Sit Amet，Consectur adipiscing Elit。 Donec Nec Purus會眾，Porta Sapien，位於Porta Sapien。在Sed Elit lectus中。 SED LACUS ELIT，SEMPER VITAE FELIS ID，SODALES COANUE SAPIEN。</p>

6個動畫圖標

添加FA-SPIN，FA-PULSE，FA-REFRESH，FA-COG類，以設置旋轉圖標。 IE8 -IE9中不支持動畫。

  <i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>

7個轉換圖標

要旋轉或翻轉圖標，請使用FA-ROTATE-*和FA-FLIP-*類。

  <i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>

8個組合圖標

You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, 和fa-stack-2x for the enlarged size.

  <span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span>

  <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span>

  <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span>

  <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>

3 Font Awesome 4.5.0 collection, classes 和css code to insert using the content property

要旋轉或翻轉圖標，請使用FA-ROTATE-*和FA-FLIP-*類。

4個相關資源

除了字體Awesome Collection，您還可以使用其他圖標字體。

Fontello 具有大量各種圖標字體。您可以選擇自己喜歡的圖標並將其下載到計算機上。

基金會圖標是Foundation Framework開發人員的另一個圖標字體集合。除標準圖標外，該網站還具有圓形圖標，社交媒體圖標等。

材料圖標是Google統一的平面圖標，體現了易感性。圖標旨在在所有通用平台和所有屏幕分辨率上進行優化的顯示。

圖標字體集合包含750多個圖標。在您的網站上安裝集合的最簡單方法是使用Google Web字體之類的圖標。為此，頁面標記中包含以下代碼：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

要正確顯示瀏覽器字體，將使用圖標字體的元素給出材料 - 元素類：

。字體重量：正常字體式：正常字體大小：24px; / *首選圖標大小 */顯示：內聯塊;寬度：1EM;身高：1EM;線高：1;文本轉換：無；字母間隔：正常單詞包裹：正常；白空間：nowrap;方向：ltr; -webkit-font-smoothing：抗血症； / *由所有webkit瀏覽器支持 */文本渲染：優化性； / * Safari和Chrome Support */ -Moz-Osx-Font-Smoothing：灰度； /* Firefox支持。 */ font-feature-settings：'liga'; /* IE支持。 */}

圖標本身是使用<I class=''material-圖標''>圖標的結紮或HTML代碼</i> 標籤，例如：

<i class="material-圖標">Account_Balance_Wallet</i><i class="material-圖標"></i>

所有現代瀏覽器都可以理解結紮，即從版本10開始。圖標代碼是自動生成的，為此，您需要左鍵單擊圖標圖像並複制建議的外觀。

圖標大小

圖標大小 is controlled by additional classes:

.material-圖標.md-12 {font-size：18px;} /* for<i class="material-圖標 md-18"></i> */

.material-圖標.md-24 {font-size：24px;} /* for<i class="material-圖標 md-24"></i> */

.material-圖標.md-36 {font-size：36px;} /* for<i class="material-圖標 md-36"></i> */

.material-圖標.md-48 {font-size：48px;} /* for<i class="material-圖標 md-48"></i> */

圖標顏色

圖標的顏色還使用其他類別設置：

.material-圖標.md-dark {顏色：rgba（0，0，0，0，0.54）;} /*<i class="material-圖標 md-dark"></i> */

.matial-圖標.md-light {顏色：rgba（255、255、255、1）;} /*<i class="material-圖標 md-light"></i> */

.material-圖標.md-dark.md-inative {color：rgba（0，0，0，0，0.26）;} /*<i class="material-圖標 md-dark md-inactive"></i> * /

.material-圖標.md-light.md-inative {顏色：rgba（255、255、255、0.3）;} /*<i class="material-圖標 md-light md-inactive">臉</i> */

要設置自定義顏色，您需要添加一個定義圖標顏色的類，例如：

.material-圖標.indigo {顏色：＃1a237e;} /*<i class="material-圖標 indigo"></i> */

常見問題

簡單的字體很棒？

從本質上講，它是帶有圖標的字體，可以添加到任何網頁元素中以增強其可見性和設計。該系列由適合任何任務和目的的數百個圖標組成。有關此鏈接的更多信息