Font-Awesome最新版完整使用教程

時間 2019-12-11

標籤 font awesome 最新版完整使用教程简体版

原文原文鏈接

何爲Font-Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.css

簡言之:可伸縮的圖標(矢量化),高度自定義(大小,顏色,陰影等)html

優點

目前圖標總數共有519個;
不依賴Javascript
矢量圖形,無限縮放
免費,可用於商業
CSS控制樣式,自定義圖標顏色,大小,陰影,一切可能實現的效果
支持retina顯示(蘋果retina 屏幕)
源於BS框架(最初的目標設計使用方向),如今基本支持主流的框架
兼容屏幕閱讀器
圖標用到的animation適用於IE8~9

缺點

不兼容IE7(不過如今用戶使用主流瀏覽器都慢慢過渡到較新的..因此也不算奇葩)

獲取Font-Awesome

官網 — 點擊Download便可下載最新版本
Github — Font-Awesome倉庫

使用方法

本地使用

下載完畢[font-awesome-4.3.0.zip]解壓文件包括如下幾個文件夾:linux

CSS — 字體的引入,圖標基礎樣式,大小等
fonts — CSS須要引用字體文件夾,本地用戶須要安裝內部的fontawesome-webfont.ttf(CSS引入字體)
less — 各類參數自定義的less文件,用來自定義Font awesome
sass — 各類參數自定義的sass文件,用來自定義Font awesome

SASS和LESS都是CSS預處理器git

把CSS文件夾和fonts複製到網站根目錄(記得安裝字體)便可使用,具體看代碼示例
代碼內含註釋—應該很好理解
建議:用Chrome F12調試,一邊查看註釋一邊折騰更妙github

index.htmlweb

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Font-Awesome完整教程</title> <link rel="stylesheet" href="css/font-awesome.min.css"> <!--生產環境建議用壓縮版本,非壓縮版本建議學習使用 --> <style> * { outline: 0px; border: 0px; margin: 0px; padding: 0px; } div { border: 2px solid #882BEF; margin: 30px; width: 500px; height: auto; } ul { list-style: none; } div { border: 2px solid #882BEF; margin: 30px; width: 500px; height: auto; } .extraHeight { height: 400px; } .extraHeight ul li { margin: 10px auto; } <!--啊咧,這上面全部樣式只是讓效果顯示排版一下而增長的--> </style> </head> <body> <div class="icon-test-list"> <h1>圖標基礎樣式</h1> <ul> <li><i class="fa fa-weixin"></i>微信</li> <li><i class="fa fa-whatsapp"></i>whatsapp</li> <li><i class="fa fa-youtube"></i>youtube</li> <li><i class="fa fa-weibo"></i>新浪微博</li> </ul> </div> <div class="icon-test-list"> <h1>圖標規格樣式</h1> <span></span> <ul> <li><i class="fa fa-weixin "></i>微信</li> <li><i class="fa fa-weixin fa-lg"></i>微信lg</li> <li><i class="fa fa-weixin fa-2x"></i>微信</li> <li><i class="fa fa-weixin fa-3x"></i>微信3x</li> <li><i class="fa fa-weixin fa-4x"></i>信4x</li> <li><i class="fa fa-weixin fa-5x"></i>微信5x</li> </ul> </div> <!-- fa-lg比常規圖標大33%,而2X~5x都是常規圖標大小的倍數,具體能夠用F12調試查看計算 也能夠去查看less的規則 --> <div class="icon-test-list"> <h1>圖標固定大小</h1> <ul> <li><i class="fa fa-fw fa-weixin"></i>微信</li> <li><i class="fa fa-fw fa-whatsapp"></i>whatsapp</li> <li><i class="fa fa-fw fa-youtube"></i>youtube</li> <li><i class="fa fa-fw fa-weibo"></i>新浪微博</li> </ul> </div> <!-- fa-fw是用來固定大小的 --> <div class="icon-test-list extraHeight"> <h1>圖標邊框及圖標移動</h1> <ul> <li><i class="fa fa-tag pull-right"></i>這是一句測試的文字,圖標定位在右邊</li> <li><i class="fa fa-tag fa-2x pull-left "></i> <p>圖標沒有邊框,圖標在左邊,圖標2x[這是填充文字這是填充文字這是填充文字這是填充文字]</p> </li> <li><i class="fa fa-search fa-3x pull-right fa-border"></i> <p>個人圖標三倍大小,內容在右邊,且圖標有邊框[這是填充文字這是填充文字這是填充文字這是填充文字][這是填充文字這是填充文字這是填充文字這是填充文字][這是填充文字這是填充文字這是填充文字這是填充文字][這是填充文字這是填充文字這是填充文字這是填充文字][這是填充文字這是填充文字這是填充文字這是填充文字][這是填充文字這是填充文字這是填充文字這是填充文字][這是填充文字這是填充文字這是填充文字這是填充文字][這是填充文字這是填充文字這是填充文字這是填充文字][這是填充文字這是填充文字這是填充文字這是填充文字]</p> </li> </ul> </div> <!-- fa-border 能夠給圖標加一個邊框 pull-right和pull-left能夠控制圖標位置,是文字環繞 --> <div class="icon-test-list"> <h1>圖標動畫</h1> <ul> <li><i class="fa fa-spin fa-2x fa-arrow-right"></i> fa-arrow-right-勻速旋轉,2s一圈</li> <li><i class="fa fa-spin fa-2x fa-spinner fa-pulse"></i>fa-spinner--一圈分爲八次轉完,時間1S</li> </ul> </div> <!-- 在less裏面定義 spin的速度是linear(勻速),一圈2s pulse分爲八步,一圈時間1S --> <div class="icon-test-list"> <h1>圖標旋轉</h1> <ul> <li><i class="fa fa-hand-o-up "></i>手:默認情況</li> <li><i class="fa fa-hand-o-up fa-rotate-90 "></i>手:旋轉90度</li> <li><i class="fa fa-hand-o-up fa-rotate-180 "></i>手:旋轉180度</li> <li><i class="fa fa-hand-o-up fa-rotate-270"></i>手:旋轉270度</li> <li><i class="fa fa-hand-o-up fa-flip-horizontal "></i>手:水平(90%)</li> <li><i class="fa fa-hand-o-up fa-flip-vertical "></i>手:垂直(180%)</li> </ul> </div> <!-- fa-rotate-*:來控制旋轉的度數 fa-flip-*:兩個參數來控制水平和垂直 --> <div class="icon-test-lise"> <h1>堆疊圖標:合併圖形</h1> <ul> <li> <span class="fa-stack"> <i class="fa fa-stack-2x fa-bookmark-o"></i> <i class="fa fa-stack-1x fa-child"></i> </span>隨便找的兩個圖標合成 </li> <li> <span class="fa-stack"> <i class="fa fa-stack-2x fa-lemon-o"></i> <i class="fa fa-stack-1x fa-chain "></i> </span>隨便找的兩個圖標合成 </li> <li> <span class="fa-stack"> <i class="fa fa-stack-2x fa-wheelchair"></i> <i class="fa fa-stack-1x fa-transgender-alt"></i> </span>隨便找的兩個圖標合成 </li> <li> <span class="fa-stack fa-2x"> <i class="fa fa-stack-1x fa-comment"></i> <i class="fa fa-stack-2x fa-linux"></i> </span>隨便找的兩個圖標合成 </li> <li> <span class="fa-stack fa-3x"> <i class="fa fa-stack-1x fa-chain"></i> <i class="fa fa-stack-2x fa-circle-o "></i> </span>隨便找的兩個圖標合成 </li> <li> <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>隨便找的兩個圖標合成 </li> </ul> </div> <!-- fa-stack做爲父,組合子元素生成的對象;能夠使用規格參數 fa-stack-2x 做爲背景的棧,要大於顯示圖形的棧 fa-stack-1x 做爲背景棧內部的內容,因此要小於背景棧 fa-inverse 用來反轉圖標顏色,生成可見圖標組 --> </body> </html>

CND引用AweSome(推薦)

只要把head內引用本地awesome的位置改下便可瀏覽器

<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">轉載申明（原博連接http://blog.csdn.net/crper/article/details/46293295）

相關標籤/搜索