Font Awesome圖標安裝及使用方法
前言
圖標地址:http://www.yeahzan.com/fa/facss.htmlcss
fontawesome圖標提供豐富的矢量字體圖標—經過CSS能夠任意控制全部圖標的大小 ，顏色，陰影。 今天烽煙就來介紹下fontawesome圖標的安裝方法及使用方法。html
Font Awesome 特性框架
479個圖標：只需一種字體，同時擁有多個圖標 無需JavaScript：Font Awesome不依賴於JS,同時中文版奧森提供了IE7+以上兼容性 解決方案：可無限放大縮小，使用和普通字體同樣自由便捷,可任意縮放 徹底免費：徹底免費，能夠用於商業用途， SIL OFL 1.1 協議 CSS可控性：經過CSS能夠任意控制全部圖標的大小 ，顏色，陰影。 徹底兼容視網膜屏：因爲fontawesome是矢量字體，能夠徹底兼容視網膜屏 良好兼容性：能和Bootstrap等經常使用UI框架一塊兒使用，奧森（Font Awesome中文）兼容IE7+ 桌面應用：能夠用於桌面應用中 兼容屏幕閱讀器：不像其它字體那樣， 它能夠兼容屏幕閱讀器。less
安裝
1.下載Font Awesome最新安裝包。 2.在 <head> 標籤 裏, 引入 font-awesome.min.css.（具體路徑是你的狀況而定）字體
- <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
只須要這兩步你就能夠在主題中調用fontawesome圖標了，對於使用烽煙主題的朋友能夠忽略這部。spa
使用
引入fontawesome之後，你能夠把<i>標籤用在各個地方！orm
1.例如基本圖標：複製如下代碼到你的html裏htm
- <i class="fa fa-camera-retro"></i> fa-camera-retro
你能夠經過css控制圖標的font-size,color,陰影等ip
2.Larger Icons：你能夠使用 fa-lg (增長33%), fa-2x, fa-3x, fa-4x, or fa-5x 這些類等比縮放圖標大小.ssl
- <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
若是發現圖標上下有被隱藏的狀況，你能夠經過適當增長 line-height來解決.
3.固定寬度圖標：使用 fa-fw能夠固定圖標寬度
- <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>
4.列表圖標：使用 fa-ul and fa-li 以下
- <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>
5.有邊框 & 漂浮 圖標：fa-border 和 pull-right 或者 pull-left 組合使用
- <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.
6.旋轉圖標：fa-spin 和 fa-spinner, fa-refresh, fa-cog組合
- <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>
只支持IE10+7.翻轉圖標
- <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> icon-flip-vertical
8.疊加圖標
- <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
轉自: http://www.fengyan.cc/173.html
- 1. font-awesome 使用方法
- 2. font-awesome,圖標庫
- 3. Font Awesome 圖標運用
- 4. wpf 使用Font-Awesome圖標字體
- 5. 使用Font Awesome替換EasyUI的圖標
- 6. Font Awesome 圖標如何使用
- 7. font-awesome圖標控件基本使用
- 8. bootstrap4中使用Font Awesome圖標
- 9. reactjs中離線使用font-awesome圖標
- 10. Vue.js 使用 Font Awesome 小圖標
- 更多相關文章...
- • Redis基本安裝和使用 - Redis教程
- • Wireshark下載安裝和使用教程 - TCP/IP教程
- • Composer 安裝與使用
- • Git可視化極簡易教程 — Git GUI使用方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。