Font-Awesome 基础知识 - 实例

演示fontawesome矢量图库和CSS框架的简单使用方法：如调整大小、调整角度、常用图标、特殊引号、动画图标（旋转、翻转）、图标叠加等。

logo,font

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1611
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  background: #ffe; }

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857;
  word-break: break-all;
  word-wrap: break-word;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 4px; }

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0; }

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll; }

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }

.alert-success {
  background-color: #f1f9f7;
  border-color: #e0f1e9;
  color: #1d9d74; }

.alert-success hr {
  border-top-color: #ceeadc; }

.alert-success .alert-link {
  color: #157254; }

.alert-info {
  background-color: #f0f9ff;
  border-color: #ccf3ff;
  color: #007dbc; }

.alert-info hr {
  border-top-color: #b3edff; }

.alert-info .alert-link {
  color: #005b89; }

.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b; }

.alert-warning hr {
  border-top-color: #f7e1b5; }

.alert-warning .alert-link {
  color: #66512c; }

.alert-danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442; }

.alert-danger hr {
  border-top-color: #e4b9c0; }

.alert-danger .alert-link {
  color: #843534; }

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd; }

.list-group-item:first-child {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px; }

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px; }

.list-group-item > .badge {
  float: right; }

.list-group-item > .badge + .badge {
  margin-right: 5px; }

a.list-group-item {
  color: #555; }

a.list-group-item .list-group-item-heading {
  color: #333; }

a.list-group-item:hover, a.list-group-item:focus {
  text-decoration: none;
  color: #555;
  background-color: #f5f5f5; }

.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
  background-color: #eee;
  color: #777; }

.list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading {
  color: inherit; }

.list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text {
  color: #777; }

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #1d9d74;
  border-color: #1d9d74; }

.list-group-item.active .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading, .list-group-item.active:focus .list-group-item-heading, .list-group-item.active .list-group-item-heading > small, .list-group-item.active:hover .list-group-item-heading > small, .list-group-item.active:focus .list-group-item-heading > small, .list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading > .small, .list-group-item.active:focus .list-group-item-heading > .small {
  color: inherit; }

.list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text {
  color: #9aecd2; }

.list-group-item-success {
  color: #1d9d74;
  background-color: #f1f9f7; }

a.list-group-item-success {
  color: #1d9d74; }

a.list-group-item-success .list-group-item-heading {
  color: inherit; }

a.list-group-item-success:hover, a.list-group-item-success:focus {
  color: #1d9d74;
  background-color: #e0f1ec; }

a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus {
  color: #fff;
  background-color: #1d9d74;
  border-color: #1d9d74; }

.list-group-item-info {
  color: #007dbc;
  background-color: #f0f9ff; }

a.list-group-item-info {
  color: #007dbc; }

a.list-group-item-info .list-group-item-heading {
  color: inherit; }

a.list-group-item-info:hover, a.list-group-item-info:focus {
  color: #007dbc;
  background-color: #d7efff; }

a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus {
  color: #fff;
  background-color: #007dbc;
  border-color: #007dbc; }

.list-group-item-warning {
  color: #8a6d3b;
  background-color: #fcf8e3; }

a.list-group-item-warning {
  color: #8a6d3b; }

a.list-group-item-warning .list-group-item-heading {
  color: inherit; }

a.list-group-item-warning:hover, a.list-group-item-warning:focus {
  color: #8a6d3b;
  background-color: #faf2cc; }

a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus {
  color: #fff;
  background-color: #8a6d3b;
  border-color: #8a6d3b; }

.list-group-item-danger {
  color: #a94442;
  background-color: #f2dede; }

a.list-group-item-danger {
  color: #a94442; }

a.list-group-item-danger .list-group-item-heading {
  color: inherit; }

a.list-group-item-danger:hover, a.list-group-item-danger:focus {
  color: #a94442;
  background-color: #ebcccc; }

a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus {
  color: #fff;
  background-color: #a94442;
  border-color: #a94442; }

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px; }

.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3; }

a {
  color: #21b384;
  text-decoration: none; }

HTML

<div class="container">
  <section id="basic">
  <h2 class="page-header">
    Basic Icons
  </h2>

<div class="row">
    <div class="col-md-3 col-sm-4">
      <p>
        <i class="fa fa-camera-retro"></i> fa-camera-retro
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        You can place Font Awesome icons just about anywhere using the CSS Prefix <code>fa</code> and the icon's
        name. Font Awesome is designed to be used with inline elements (we like the <code><i></code> tag for
        brevity, but using a <code><span></code> is more semantically correct).
      </p>
<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro"</span><span class="nt">></i></span> fa-camera-retro
</code></pre></div>
      <div class="alert alert-success">
        <ul class="fa-ul">
          <li>
            <i class="fa fa-info-circle fa-lg fa-li"></i>
            If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color,
            drop shadow, and anything else that gets inherited using CSS.
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section id="larger">
  <h2 class="page-header">
    Larger Icons
  </h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>
      <p><i class="fa fa-camera-retro fa-2x"></i> fa-2x</p>
      <p><i class="fa fa-camera-retro fa-3x"></i> fa-3x</p>
      <p><i class="fa fa-camera-retro fa-4x"></i> fa-4x</p>
      <p><i class="fa fa-camera-retro fa-5x"></i> fa-5x</p>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
        <code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.
      </p>
<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-lg"</span><span class="nt">></i></span> fa-lg
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-2x"</span><span class="nt">></i></span> fa-2x
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-3x"</span><span class="nt">></i></span> fa-3x
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-4x"</span><span class="nt">></i></span> fa-4x
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-5x"</span><span class="nt">></i></span> fa-5x
</code></pre></div>
      <div class="alert alert-success">
        <ul class="fa-ul">
          <li>
            <i class="fa fa-exclamation-triangle fa-li fa-lg"></i>
            If your icons are getting chopped off on top and bottom, make sure you have
            sufficient line-height.
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section id="fixed-width">
  <h2 class="page-header">
    Fixed Width Icons
  </h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <div class="list-group">
        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>  Home</a>
        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>  Library</a>
        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>  Applications</a>
        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>  Settings</a>
      </div>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        Use <code>fa-fw</code> to set icons at a fixed width. Great to use when different icon widths throw off alignment.
        Especially useful in things like nav lists & list groups.
      </p>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
  <span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-home fa-fw"</span><span class="nt">></i></span><span class="ni"> </span> Home<span class="nt"></a></span>
  <span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-book fa-fw"</span><span class="nt">></i></span><span class="ni"> </span> Library<span class="nt"></a></span>
  <span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-pencil fa-fw"</span><span class="nt">></i></span><span class="ni"> </span> Applications<span class="nt"></a></span>
  <span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-cog fa-fw"</span><span class="nt">></i></span><span class="ni"> </span> Settings<span class="nt"></a></span>
<span class="nt"></div></span>
</code></pre></div>
    </div>
  </div>
</section>

<section id="list">
  <h2 class="page-header">
    List Icons
  </h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <ul class="fa-ul">
        <li><i class="fa-li fa fa-check-square"></i>List icons</li>
        <li><i class="fa-li fa fa-check-square"></i>can be used</li>
        <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
        <li><i class="fa-li fa fa-square"></i>in lists</li>
      </ul>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
<div class="highlight"><pre><code class="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"fa-ul"</span><span class="nt">></span>
  <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-check-square"</span><span class="nt">></i></span>List icons<span class="nt"></li></span>
  <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-check-square"</span><span class="nt">></i></span>can be used<span class="nt"></li></span>
  <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-spinner fa-spin"</span><span class="nt">></i></span>as bullets<span class="nt"></li></span>
  <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-square"</span><span class="nt">></i></span>in lists<span class="nt"></li></span>
<span class="nt"></ul></span>
</code></pre></div>
    </div>
  </div>
</section>

<section id="bordered-pulled">
  <h2 class="page-header">
    Bordered & Pulled Icons
  </h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p>
        <i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
        …tomorrow we will run faster, stretch out our arms farther… And then one fine morning—
        So we beat on, boats against the current, borne back ceaselessly into the past.
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
        article icons.
      </p>
<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-quote-left fa-3x pull-left fa-border"</span><span class="nt">></i></span>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
</code></pre></div>
    </div>
  </div>
</section>

<section id="spinning">
  <h2 class="page-header">
    Spinning Icons
  </h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p>
        <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
        <button class="btn btn-default btn-lg"><i class="fa fa-circle-o-notch fa-spin"></i></button>
        <button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
        <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
        <code>fa-refresh</code>, and <code>fa-cog</code>.
      </p>
<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-spinner fa-spin"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-circle-o-notch fa-spin"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-refresh fa-spin"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-cog fa-spin"</span><span class="nt">></i></span>
</code></pre></div>
      <p class="alert alert-success">
        <i class="fa fa-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9.
      </p>
    </div>
  </div>
</section>

<section id="rotated-flipped">
  <h2 class="page-header">
    Rotated & Flipped
  </h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <p style="font-size: 18px;">
        <i class="fa fa-shield"></i>  normal<br>
        <i class="fa fa-shield fa-rotate-90"></i>  fa-rotate-90<br>
        <i class="fa fa-shield fa-rotate-180"></i>  fa-rotate-180<br>
        <i class="fa fa-shield fa-rotate-270"></i>  fa-rotate-270<br>
        <i class="fa fa-shield fa-flip-horizontal"></i>  fa-flip-horizontal<br>
        <i class="fa fa-shield fa-flip-vertical"></i>  fa-flip-vertical
      </p>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes.
      </p>
<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-shield"</span><span class="nt">></i></span> normal<span class="nt"><br></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-shield fa-rotate-90"</span><span class="nt">></i></span> fa-rotate-90<span class="nt"><br></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-shield fa-rotate-180"</span><span class="nt">></i></span> fa-rotate-180<span class="nt"><br></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-shield fa-rotate-270"</span><span class="nt">></i></span> fa-rotate-270<span class="nt"><br></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-shield fa-flip-horizontal"</span><span class="nt">></i></span> fa-flip-horizontal<span class="nt"><br></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-shield fa-flip-vertical"</span><span class="nt">></i></span> icon-flip-vertical
</code></pre></div>
    </div>
  </div>
</section>

<section id="stacked">
  <h2 class="page-header">
    Stacked Icons
  </h2>
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <div class="margin-bottom">
        <span class="fa-stack fa-lg">
          <i class="fa fa-square-o fa-stack-2x"></i>
          <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
        fa-twitter on fa-square-o<br>
        <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
        </span>
        fa-flag on fa-circle<br>
        <span class="fa-stack fa-lg">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
        </span>
        fa-terminal on fa-square<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"></i>
        </span>
        fa-ban on fa-camera
      </div>
    </div>
    <div class="col-md-9 col-sm-8">
      <p>
        To stack multiple icons, use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
        for the regularly sized icon, and <code>fa-stack-2x</code> for the larger icon. <code>fa-inverse</code>
        can be used as an alternative icon color. You can even throw <a href="#larger">larger icon</a> classes on the parent
        to get further control of sizing.
      </p>
<div class="highlight"><pre><code class="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"fa-stack fa-lg"</span><span class="nt">></span>
  <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-square-o fa-stack-2x"</span><span class="nt">></i></span>
  <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-twitter fa-stack-1x"</span><span class="nt">></i></span>
<span class="nt"></span></span>
fa-twitter on fa-square-o<span class="nt"><br></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"fa-stack fa-lg"</span><span class="nt">></span>
  <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-circle fa-stack-2x"</span><span class="nt">></i></span>
  <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-flag fa-stack-1x fa-inverse"</span><span class="nt">></i></span>
<span class="nt"></span></span>
fa-flag on fa-circle<span class="nt"><br></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"fa-stack fa-lg"</span><span class="nt">></span>
  <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-square fa-stack-2x"</span><span class="nt">></i></span>
  <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-terminal fa-stack-1x fa-inverse"</span><span class="nt">></i></span>
<span class="nt"></span></span>
fa-terminal on fa-square<span class="nt"><br></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"fa-stack fa-lg"</span><span class="nt">></span>
  <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera fa-stack-1x"</span><span class="nt">></i></span>
  <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-ban fa-stack-2x text-danger"</span><span class="nt">></i></span>
<span class="nt"></span></span>
fa-ban on fa-camera
</code></pre></div>
    </div>
  </div>
</section>
</div>

演示fontawesome矢量图库和CSS框架的简单使用方法：如调整大小、调整角度、常用图标、特殊引号、动画图标（旋转、翻转）、图标叠加等。

logo,font

编辑器支持Emmet

快捷键

演示fontawesome矢量图库和CSS框架的简单使用方法：如调整大小、调整角度、常用图标、特殊引号、动画图标（旋转、翻转）、图标叠加等。

logo,font

使用Anime.js和SVG实现的Mozilla混合图标变形动画

一款带光圈阴影的纯CSS3 Instagram图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：