Font Awesome 圖標如何使用

時間 2019-11-30

標籤 font awesome 圖標如何使用简体版

原文原文鏈接

Font Awesome 圖標如何使用

1、總結

一句話總結：Font Awesome字體圖標很是好用，直接引入font-awesome.css，而後就能夠直接使用了，使用的時候是用的i標籤。

一、字體圖標通常用什麼元素使用？

Font Awesome 設計爲與內聯元素一塊兒使用。 <i>和 <span> 元素普遍用於圖標。php

2、Font Awesome 圖標如何使用

Font Awesome 是一套絕佳的圖標字體庫和CSS框架。css

Font Awesome 字體爲您提供可縮放矢量圖標,它能夠被定製大小、顏色、陰影以及任何能夠用CSS的樣式。html

要使用Font Awesome圖標，請在HTML頁面的部分中添加如下行：ajax

一、國內推薦 CDN：框架

二、海外推薦 CDN字體

三、直接下載到本地spa

Download設計

注意： 不太建議下載來安裝，直接在 html 文檔頭部引用 CDN 文件便可。code

注意： 本教程使用的是 4.7.0 版本。cdn

您能夠使用前綴 fa 和圖標的名稱來放置 Font Awesome 圖標。

實例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
 5 </head>
 6 <body>
 7  
 8 <i class="fa fa-car"></i>
 9 <i class="fa fa-car" style="font-size:48px;"></i>
10 <i class="fa fa-car" style="font-size:60px;color:red;"></i>
11  
12 </body>
13 </html>