碼上快樂

相關內容    簡體    繁體

Font Awesome使用方法

本文轉載自   查看原文   2018-02-01 17:39   7250    CSS

Font Awesome（中文站點）是一套為Bootstrap而創造的圖標字體庫及CSS框架，在業界享有盛譽。

FA包含了常規web開發所需要用到的幾乎所有圖標，並且免費授權使用，只需要下載即可。
所有的圖標列表查看

加入文件

1.最簡單的方式：CDN （由BootCDN提供）

一句話將Font Awesome加入您的網頁中。您完全不用下載或者安裝任何東西！

將以下代碼粘貼到網頁HTML代碼的 <head> 部分.

 
  1. <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2.下載文件，使用默認CSS

如果您使用了默認的Bootstrap CSS樣式，那么你可以使用這種方式來引入默認的Font Awesome CSS樣式。

  1. 復制整個 font-awesome 文件夾到您的項目中。
  2. 在HTML的 <head> 中引用font-awesome.min.css。
 
  1. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

3.LESS Ruby Gem

使用 官方 Font Awesome LESS Ruby Gem 可以簡單方便的將 Font Awesome LESS 集成到Rails項目中。由 @supercodepoet 維護。

將下面這行代碼加入到應用的Gemfile中：

gem 'font-awesome-less'

然后執行：

$ bundle

或者自行安裝：

$ gem install font-awesome-less

4.SASS Ruby Gem

使用 官方 Font Awesome SASS Ruby Gem 可以簡單方便的將 Font Awesome SASS 集成到Rails項目中。由 @supercodepoet 維護。

將下面這行代碼加入到應用的Gemfile中：

gem 'font-awesome-sass'

然后執行：

$ bundle

或者自行安裝：

$ gem install font-awesome-sass

5.進階方式：自定義 LESS 或 SASS

使用LESS或SASS的方法來自定義 Font Awesome 4.7.0 。

  1. 復制 font-awesome/ 目錄到您的項目中。
  2. 打開 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件 ，然后修改 @fa-font-path 或 $fa-font-path 為您的字體目錄。 注：@fa-font-path: "../font";//字體路徑是相對於編譯的CSS目錄。
  3. 如果使用了靜態編譯器，那么重新編譯LESS或SASS文件。如果沒有，那么現在應該一切OK了。
  4. 參考示例，然后開始使用Font Awesome吧!
如果需要支持IE7，那真的十分抱歉。Font Awesome從4.1.0版本開始不再支持IE7， 但更早的版本仍然支持。您可以查看  3.2.1 的IE7支持說明。 然后呢，您可以去找那個非要支持IE7的人算賬 :)

參考示例，然后開始使用Font Awesome吧!

icon使用方法

基本圖標

您可以將Font Awesome圖標使用在幾乎任何地方，只需要使用CSS前綴 fa ，再加上圖標名稱。 Font Awesome是為使用內聯元素而設計的。我們通常更喜歡使用 <i> ，因為它更簡潔。 但實際上使用 <span> 才能更加語義化。

 
  1. <i class="fa fa-camera-retro"></i> fa-camera-retro

大圖標

使用 fa-lg (33%遞增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 類 來放大圖標。

 
  1. <i class="fa fa-camera-retro fa-lg"></i> fa-lg
  2. <i class="fa fa-camera-retro fa-2x"></i> fa-2x
  3. <i class="fa fa-camera-retro fa-3x"></i> fa-3x
  4. <i class="fa fa-camera-retro fa-4x"></i> fa-4x
  5. <i class="fa fa-camera-retro fa-5x"></i> fa-5x

固定寬度

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

 
  1. <div class="list-group">
  2.   <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  3.   <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  4.   <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  5.   <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
  6. </div>

用於列表

使用 fa-ul 和 fa-li 便可以簡單的將無序列表的默認符號替換掉。

 
  1. <ul class="fa-ul">
  2.   <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  3.   <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  4.   <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  5.   <li><i class="fa-li fa fa-square"></i>in lists</li>
  6. </ul>

邊框與對齊

使用 fa-border 以及 pull-right 或 pull-left 可以輕易構造出引用的特殊效果。

 
  1. <i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
  2. ...tomorrow we will run faster, stretch out our arms farther...
  3. And then one fine morning— So we beat on, boats against the
  4. current, borne back ceaselessly into the past.

動畫

使用 fa-spin 類來使任意圖標旋轉，現在您還可以使用 fa-pulse 來使其進行8方位旋轉。尤其適合 fa-spinner、fa-refresh 和 fa-cog

 
  1. <i class="fa fa-spinner fa-spin"></i>
  2. <i class="fa fa-circle-o-notch fa-spin"></i>
  3. <i class="fa fa-refresh fa-spin"></i>
  4. <i class="fa fa-cog fa-spin"></i>
  5. <i class="fa fa-spinner fa-pulse"></i>
CSS3動畫不支持IE8-IE9。

旋轉與翻轉

使用 fa-rotate-* 和 fa-flip-* 類可以對圖標進行任意旋轉和翻轉。

 
  1. <i class="fa fa-shield"></i> normal<br>
  2. <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
  3. <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
  4. <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
  5. <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
  6. <i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

組合使用

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

 
  1. <span class="fa-stack fa-lg">
  2.   <i class="fa fa-square-o fa-stack-2x"></i>
  3.   <i class="fa fa-twitter fa-stack-1x"></i>
  4. </span>
  5. fa-twitter on fa-square-o<br>
  6. <span class="fa-stack fa-lg">
  7.   <i class="fa fa-circle fa-stack-2x"></i>
  8.   <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
  9. </span>
  10. fa-flag on fa-circle<br>
  11. <span class="fa-stack fa-lg">
  12.   <i class="fa fa-square fa-stack-2x"></i>
  13.   <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
  14. </span>
  15. fa-terminal on fa-square<br>
  16. <span class="fa-stack fa-lg">
  17.   <i class="fa fa-camera fa-stack-1x"></i>
  18.   <i class="fa fa-ban fa-stack-2x text-danger"></i>
  19. </span>
  20. fa-ban on fa-camera


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Font Awesome的正確簡單使用方法 圖標庫Font Awesome使用方法 Font Awesome 圖標如何使用 pyqt中使用font awesome字體的兩種方法 Font-Awesome使用教程 vue 使用font-awesome vux 使用 font-awesome vue使用Font Awesome5 CSS：@font-face的使用方法 使用Font Awesome替換EasyUI的圖標
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM