双色球的计算公式:  Examples

來這里了解 Font Awesome 的各種特色用法…

當你已經知道 如何開始使用Font Awesome之后, 你就可以用<i>標簽包裹起來,用到你網站的任何地方。這里的一些例子也是來自于 Bootstrap文檔.

下面的例子仍然很簡單 假如你使用Font Awesome CDN,它提供自動輔助功能的支持。如果你不使用FontAwesome CDN,請參見手動設置可訪問性的例子和了解更多關于讓你的圖標看起來更酷。

例如: 默認圖標 fa-camera-retro

你可以通過設置CSS前綴fa和圖標的具體名稱,來把Font Awesome 圖標放在任意位置。Font Awesome 被設計為用于行內元素(我們喜歡用更簡短的<i>標簽,它的語義更加精準)。

<i class="fa fa-camera-retro"></i> fa-camera-retro
  • 例如: 默認圖標 如果您修改了圖標容器的字體大小,圖標大小會隨之改變。同樣也適用于顏色,陰影,陰影等其它任何CSS支持的效果上。

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

為了增加圖標大小相對于它們的容器, 使用 fa-lg (33% 遞增), fa-2x, fa-3x, fa-4x, 或 fa-5x classes.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  • 如果你的圖標頂部和底部被裁剪掉,請確保你有足夠的行高。

使用 fa-fw 來設置圖標在一個固定寬度內,主要用于不同寬度圖標無法對齊的情況,尤其在列表或導航時起到重要作用。

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首頁</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 關于我們</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 后臺應用編輯</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系統設置</a>
</div>
  • 使用列表類圖標
  • 輕松的替換
  • 無序列表
  • 中的默認圖標

使用 fa-ul and fa-li 輕松的替換無序列表中的默認圖標。

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>使用列表類圖標</li>
  <li><i class="fa-li fa fa-check-square"></i>輕松的替換</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>無序列表</li>
  <li><i class="fa-li fa fa-square"></i>中的默認圖標</li>
</ul>

…獨坐在路邊街角 冷風吹醒,默默地伴著我的孤影,只想將結他緊抱,訴出辛酸,就在這刻想起往事,心中一股沖勁勇闖,拋開那現實沒有顧慮,仿佛身邊擁有一切,看似與別人筑起隔膜。

使用 fa-borderfa-pull-rightfa-pull-left 可以輕易構造出引用的特殊效果。

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
...獨坐在路邊街角 冷風吹醒,默默地伴著我的孤影,只想將結他緊抱,訴出辛酸,就在這刻想起往事,心中一股沖勁勇闖,拋開那現實沒有顧慮,仿佛身邊擁有一切,看似與別人筑起隔膜。

用fa-spinner來作為加載動畫圖標 用fa-circle-o-notch來作為加載動畫圖標 用fa-refresh來作為加載動畫圖標 用fa-cog來作為加載動畫圖標 用fa-spinner來作為加載動畫圖標

使用 fa-spin 使任意圖標旋轉,還可以使用 fa-pulse 使其進行8方位旋轉。尤其適合 fa-spinner, fa-refresh, 和 fa-cog。

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

溫馨提示: 動畫圖標會在一些平臺的瀏覽器中出現抖動的效果,可參見 問題列表#671 中的例子來解決此問題。

溫馨提示: CSS3動畫不支持IE8-IE9。

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

若要對圖標進行任意旋轉和翻轉, 可以使用 fa-rotate-* and fa-flip-* 類.

<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
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

如果想要將多個圖標組合起來,使用fa-stack類,作為父容器,fa-stack-1x作為正常比例的圖標,fa-stack-2x作為大一些的圖標?;箍梢允褂?code>fa-inverse類來切換圖標顏色。您可以在父容器中 通過添加 larger icon 類來控制整體大小。

<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

Font Awesome 完全兼容 Bootstrap 的所有組件。

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.6.3</a>

<div class="btn-group">
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-left" title="左對齊"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-center" title="劇中對齊"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-right" title="右對齊"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-justify" title="平均分布"></i>
  </a>
</div>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="您的郵箱地址">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="請輸入密碼">
</div>

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> 用戶</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down" title="打開下拉菜單"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> 編輯</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> 刪除</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> 屏蔽</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-unlock"></i> 鎖定管理員</a></li>
  </ul>
</div>

任何css樣式你都可以加在Font Awesome 上面。

星級評分 ( 靈感來源于 CSS Tricks )

更新中... 保存中...請勿操作。

電量剩余: 50%

With 预估准确度公式 in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.

<a class="btn btn-default" href="path/to/settings" aria-label="Settings">
  <i class="fa fa-cog" aria-hidden="true"></i>
</a>

<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
  <i class="fa fa-trash-o" aria-hidden="true"></i>
</a>

<a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Refreshing...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Saving. Hang tight!</span>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="text" placeholder="您的郵箱地址">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="password" placeholder="請輸入密碼">
</div>
<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Battery level: 50%</span>