Font Awesome 图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。
Font Awesome 字体为您供给可缩放矢量图标,它能够被定制巨细、色彩、暗影和任何能够用CSS的款式。
要利用Font Awesome图标，请在HTML页面的
局部中增添以下行：
1、国际保举 CDN：
<link rel="stylesheet" href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
2、海内保举 CDN
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
3、间接下载到本地
Download
注重： 不太倡议下载来装置，间接在 html 文档头部援用 CDN 文件便可。
注重： 本教程利用的是 4.7.0 版本。
您能够利用前缀 fa 和图标的称号来安排 Font Awesome 图标。
实例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
head>
<body>
<i class="fa fa-car">i>
<i class="fa fa-car" style="font-size:48px;">i>
<i class="fa fa-car" style="font-size:60px;color:red;">i>
body>
html>
成果:
亲身尝尝
点击 "亲身尝尝" 按钮检查在线实例
Font Awesome 设想为与内联元素一路利用。 和 元素普遍用于图标。
别的注重，若是变动图标容器的字体巨细或色彩，图标会变动。
大图标
fa-lg (增添33％)，fa-2x，fa-3x， fa-4x，或 fa-5x 类用于增添绝对其容器的图标巨细。
实例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
head>
<body>
<i class="fa fa-car fa-lg">i>
<i class="fa fa-car fa-2x">i>
<i class="fa fa-car fa-3x">i>
<i class="fa fa-car fa-4x">i>
<i class="fa fa-car fa-5x">i>
body>
html>
成果:
亲身尝尝
提醒： 若是你的图标在顶部和底部被堵截，请增添行高。
列表图标
fa-ul 和 fa-li 类用于替换无序列表中的默许前缀。
实例
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square">i>List iconsli>
<li><i class="fa-li fa fa-spinner fa-spin">i>List iconsli>
<li><i class="fa-li fa fa-square">i>List iconsli>
ul>
成果:
- List icons
- List icons
- List icons
亲身尝尝
边境和被拉的图标
fa-border，fa-pull-right 或 fa-pull-left 类用于拉式援用或文章图标。
实例
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border">i>
【WEB手艺大学】-更专业的WEB开辟手艺教程！！！<br>
【WEB手艺大学】-更专业的WEB开辟手艺教程！！！<br>
【WEB手艺大学】-更专业的WEB开辟手艺教程！！！<br>
【WEB手艺大学】-更专业的WEB开辟手艺教程！！！
成果:
【WEB手艺大学】-更专业的WEB开辟手艺教程！！！
【WEB手艺大学】-更专业的WEB开辟手艺教程！！！
【WEB手艺大学】-更专业的WEB开辟手艺教程！！！
【WEB手艺大学】-更专业的WEB开辟手艺教程！！！
亲身尝尝
静态图标
fa-spin 类能够让图标扭转, fa-pulse 类能够使图标以 8 步为周期停止扭转。
实例
<i class="fa fa-spinner fa-spin">i>
<i class="fa fa-circle-o-notch fa-spin">i>
<i class="fa fa-refresh fa-spin">i>
<i class="fa fa-cog fa-spin">i>
<i class="fa fa-spinner fa-pulse">i>
成果:
亲身尝尝
注重: IE8 和 IE9 不撑持 CSS3 动画。
扭转和翻转的图标
fa-rotate-* 和 fa-flip-* 类用于扭转和翻转图标。
实例
<i class="fa fa-shield">i>
<i class="fa fa-shield fa-rotate-90">i>
<i class="fa fa-shield fa-rotate-180">i>
<i class="fa fa-shield fa-rotate-270">i>
<i class="fa fa-shield fa-flip-horizontal">i>
<i class="fa fa-shield fa-flip-vertical">i>
成果:
亲身尝尝
重叠的图标
要重叠多个图标，请利用父级上的 fa-stack 类，fa-stack-1x 类用于惯例巨细的图标，fa-stack-2x 用于较大的图标。
fa-inverse 类能够用作替换图标色彩。您还能够向父级增添更大的图标类，以进一步节制尺寸。
实例
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x">i>
<i class="fa fa-twitter fa-stack-1x">i>
span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x">i>
<i class="fa fa-twitter fa-stack-1x fa-inverse">i>
span>
fa-twitter (inverse) on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x">i>
<i class="fa fa-ban fa-stack-2x text-danger" style="color:red;">i>
span>
fa-ban on fa-camera
成果:
fa-twitter on fa-circle-thin
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
亲身尝尝
牢固宽度图标
fa-fw 类用于设置牢固宽度的图标。 当差别的图标宽度偏离对齐时，此类很是有效。 出格合用于Bootstrap的导航列表和列表组。
实例
<div class="list-group">
<a href="#" class="list-group-item"><i class="fa fa-home fa-fw">i> Homea>
<a href="#" class="list-group-item"><i class="fa fa-book fa-fw">i> Librarya>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw">i> Applicationsa>
<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw">i> Settingsa>
div>
亲身尝尝