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>

结果:

尝试一下 »

点击 "尝试一下" 按钮查看在线实例

Font Awesome 设计为与内联元素一块儿使用。 <i>和 <span> 元素普遍用于图标。

另外注意，若是更改图标容器的字体大小或颜色，图标会更改。

参考：

Font Awesome 图标 | 菜鸟教程http://www.runoob.com/font-awesome/fontawesome-tutorial.html