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：

2、海外推荐 CDN

3、直接下载到本地

Download

注意： 不太建议下载来安装，直接在 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