Font Awesome 圖標如何使用
一、總結
一句話總結:Font Awesome字體圖標非常好用,直接引入font-awesome.css,然后就可以直接使用了,使用的時候是用的i標簽。
1、字體圖標一般用什么元素使用?
Font Awesome 設計為與內聯元素一起使用。 <i>和 <span> 元素廣泛用於圖標。
二、Font Awesome 圖標如何使用
Font Awesome 是一套絕佳的圖標字體庫和CSS框架。
Font Awesome 字體為您提供可縮放矢量圖標,它可以被定制大小、顏色、陰影以及任何可以用CSS的樣式。
要使用Font Awesome圖標,請在HTML頁面的 部分中添加以下行:
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">
3、直接下載到本地
注意: 不太建議下載來安裝,直接在 html 文檔頭部引用 CDN 文件即可。
注意: 本教程使用的是 4.7.0 版本。
您可以使用前綴 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>
結果:

嘗試一下 »
點擊 "嘗試一下" 按鈕查看在線實例
Font Awesome 設計為與內聯元素一起使用。 <i>和 <span> 元素廣泛用於圖標。
另外注意,如果更改圖標容器的字體大小或顏色,圖標會更改。
參考:
Font Awesome 圖標 | 菜鳥教程
http://www.runoob.com/font-awesome/fontawesome-tutorial.html