字體很棒6:完整評論
字體很棒是可擴展矢量圖標的集合。可以使用CSS屬性格式化圖標,設置其顏色,大小,陰影等。字體版本5.5.0包括605個圖標。
1如何安裝字體很棒
方法1。
通過將以下代碼添加到 部分:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
連接字體後,您可以使用網站上的圖標。
方法2。
從字體上下載字體真棒。解開存檔並將兩個文件夾從檔案服務器上傳到站點服務器-CSS和字體。如果您的網站上已經有具有此類名稱的文件夾,那麼您只需要向其添加從下載文件夾的文件即可。
您可以使用該文件的完整或縮小版本:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">
2如何使用字體真棒圖標
圖標可以通過兩種方式添加到網頁中:通過為<i> 和<span> elements, 或者by adding them to the desired element using the :before, :after pseudo-elements 和the appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li:{content:“ \ f015”;/ *添加家族圖標 */font-fomily:fontawesome; color:#aaaaaa; margin-right:10px;}
1個標準圖標
字體Awesome旨在與內聯元素一起使用。為了添加圖標,您首先需要將FA類設置為<i> 或者<span> 元素。
要在元素之前或之後添加所選圖標,一個空<i></i> 或者<span></span> 元素被添加到分配圖標類別的元素中,以及擴展樣式的附加類。
<i class="fa fa-camera-retro"></i>
2個大圖標
為了增加圖標相對於其容器的大小,請使用FA-LG(增加33%),FA-2X,FA-3X,FA-4X,FA-5X類。
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>
3個固定寬度圖標
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation 或者lists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> 家</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> 圖書館</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> 申請</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> 設置</a ></li></ul>
4個圖標列表
使用FA-UL和FA-LI類代替默認的子彈<ul>…</ul> 項目符號列表。
<ul class="fa-ul"> <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>
5個框架圖標和報價
Use the fa-border class to set the border for the icon. The pull-right 和pull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem Ipsum Dolor Sit Amet,Consectur adipiscing Elit。 Donec Nec Purus會眾,Porta Sapien,位於Porta Sapien。在Sed Elit lectus中。 SED LACUS ELIT,SEMPER VITAE FELIS ID,SODALES COANUE SAPIEN。</p>
6個動畫圖標
添加FA-SPIN,FA-PULSE,FA-REFRESH,FA-COG類,以設置旋轉圖標。 IE8 -IE9中不支持動畫。
<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><i class="fa fa-spinner fa-pulse"></i>
7個轉換圖標
要旋轉或翻轉圖標,請使用FA-ROTATE-*和FA-FLIP-*類。
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>
8個組合圖標
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, 和fa-stack-2x for the enlarged size.
<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>
<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>
<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>
<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>
3 Font Awesome 4.5.0 collection, classes 和css code to insert using the content property
Web應用程序的圖標 fa -udjust- \ f042;fa -nandor -\ f13d;
FA -Archive -\ f187;
FA -ARROWS- \ f047;
fa -stastisk- \ f069;
faat- \ f1fa;
FA-BALANCE尺度 - \ f24e;
FA -BAN- \ f05e;
FA -BANK- \ f19c;
FA -BARCODE- \ f02a;
fa-battery-empty- \ f244;
fa-battery-half- \ f242;
FA-Battery-Quarter- \ f243;
FA-Battery-Three三分之三 - \ f241;
fa-battery-full- \ f240;
FA -BED - \ f236;
fa -beer- \ f0fc;
FA -BELL- \ f0f3;
fa-bell-slash- \ f1f6;
FA -Binoculars- \ f1e5;
fa-birthday-cake- \ f1fd;
FA螺栓 - \ f0e7;
FA -BOMB - \ f1e2;
FA -Book -\ f02d;
要旋轉或翻轉圖標,請使用FA-ROTATE-*和FA-FLIP-*類。
4個相關資源
除了字體Awesome Collection,您還可以使用其他圖標字體。
豐特洛。Fontello 具有大量各種圖標字體。您可以選擇自己喜歡的圖標並將其下載到計算機上。
基礎圖標。基金會圖標是Foundation Framework開發人員的另一個圖標字體集合。除標準圖標外,該網站還具有圓形圖標,社交媒體圖標等。
物質圖標。材料圖標是Google統一的平面圖標,體現了易感性。圖標旨在在所有通用平台和所有屏幕分辨率上進行優化的顯示。
圖標字體集合包含750多個圖標。在您的網站上安裝集合的最簡單方法是使用Google Web字體之類的圖標。為此,頁面標記中包含以下代碼:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
要正確顯示瀏覽器字體,將使用圖標字體的元素給出材料 - 元素類:
。字體重量:正常字體式:正常字體大小:24px; / *首選圖標大小 */顯示:內聯塊;寬度:1EM;身高:1EM;線高:1;文本轉換:無;字母間隔:正常單詞包裹:正常;白空間:nowrap;方向:ltr; -webkit-font-smoothing:抗血症; / *由所有webkit瀏覽器支持 */文本渲染:優化性; / * Safari和Chrome Support */ -Moz-Osx-Font-Smoothing:灰度; /* Firefox支持。 */ font-feature-settings:'liga'; /* IE支持。 */}
圖標本身是使用<I class=''material-圖標''>圖標的結紮或HTML代碼</i> 標籤,例如:
<i class="material-圖標">Account_Balance_Wallet</i><i class="material-圖標"></i>
所有現代瀏覽器都可以理解結紮,即從版本10開始。圖標代碼是自動生成的,為此,您需要左鍵單擊圖標圖像並複制建議的外觀。
圖標大小
圖標大小 is controlled by additional classes:
.material-圖標.md-12 {font-size:18px;} /* for<i class="material-圖標 md-18"></i> */
.material-圖標.md-24 {font-size:24px;} /* for<i class="material-圖標 md-24"></i> */
.material-圖標.md-36 {font-size:36px;} /* for<i class="material-圖標 md-36"></i> */
.material-圖標.md-48 {font-size:48px;} /* for<i class="material-圖標 md-48"></i> */
圖標顏色
圖標的顏色還使用其他類別設置:
.material-圖標.md-dark {顏色:rgba(0,0,0,0,0.54);} /*<i class="material-圖標 md-dark"></i> */
.matial-圖標.md-light {顏色:rgba(255、255、255、1);} /*<i class="material-圖標 md-light"></i> */
.material-圖標.md-dark.md-inative {color:rgba(0,0,0,0,0.26);} /*<i class="material-圖標 md-dark md-inactive"></i> * /
.material-圖標.md-light.md-inative {顏色:rgba(255、255、255、0.3);} /*<i class="material-圖標 md-light md-inactive">臉</i> */
要設置自定義顏色,您需要添加一個定義圖標顏色的類,例如:
.material-圖標.indigo {顏色:#1a237e;} /*<i class="material-圖標 indigo"></i> */
常見問題
- 簡單的字體很棒?
- 從本質上講,它是帶有圖標的字體,可以添加到任何網頁元素中以增強其可見性和設計。該系列由適合任何任務和目的的數百個圖標組成。有關此鏈接的更多信息
米歇爾·平森(Michel Pinson)是旅行愛好者和內容創作者。融合了對教育和探索的熱情,他可以通過吸引教育內容來分享知識並啟發他人。通過賦予擁有全球專業知識和旅行感的個人的能力,使世界更加緊密。