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