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>

亲身尝尝