版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
學(xué)習(xí)目標(biāo)了解并能概括出Web字體圖標(biāo)的優(yōu)點;熟悉下載字體圖標(biāo)庫的流程;能運用FontAwesome字體圖標(biāo)庫提供的圖標(biāo)美化頁面。圖片的缺點增加總文件的大小和很多額外的“HTTP請求”;犧牲用戶體驗;在移動端高分辨率上會變得模糊。圖標(biāo)字體化為用戶提供可縮放的矢量圖標(biāo);可以使用CSS所提供的所有特性對它們進(jìn)行更改;完全開源,完全免費FontAwesome一、FontAwesome字體圖標(biāo)庫FontAwesome其實就是一個圖標(biāo)工具,當(dāng)前的最新版本是4.7.0,常用的有675個圖標(biāo)。有網(wǎng)頁、輔助功能、手勢、運輸、性別、文件類型、表單、支付、圖表、貨幣、標(biāo)志、醫(yī)療等多種類型。一、FontAwesome字體圖標(biāo)庫部分圖標(biāo)經(jīng)過一定的樣式設(shè)計后可以變成如下的效果:二、下載字體圖標(biāo)庫http://;只需要關(guān)注“css”和“fonts”兩個文件夾,“css”文件夾中是該工具提供的CSS文件,“fonts”文件夾是需要的字體文件。將這兩個文件拷貝到對應(yīng)的網(wǎng)站文件夾中。三、應(yīng)用字體<!doctypehtml><html><head><metacharset="utf-8"><title>Web字體圖標(biāo)</title><linkhref="css/font-awesome.min.css"rel="stylesheet"type="text/css"/><styletype="text/css">.fa-comments{font-size:3em;color:rgba(13,244,183,1.00);}</style></head>
<body><iclass="fafa-comments"></i></body></html>三、應(yīng)用字體.fa-comments:before{content:"\f086"}表示在這個元素前面插入一個內(nèi)容,這個內(nèi)容("\f086")是一個字符,f068是這個字符的16進(jìn)制unicode編碼。/zsg88/article/details/64567012拓展為了增加圖標(biāo)大小相對于它們的容器,使用fa-lg(33%遞增),fa-2x,fa-3x,fa-4x,或fa-5xclasses。<iclass="fafa-camera-retrofa-lg"></i>fa-lg<iclass="fafa-camera-retrofa-2x"></i>fa-2x<iclass="fafa-camera-retrofa-3x"></i>fa-3x<iclass="fafa-camera-retrofa-4x"></i>fa-4x<iclass="fafa-camera-retrofa-5x"></i>fa-5x拓展使用fa-fw來設(shè)置圖標(biāo)在一個固定寬度內(nèi),主要用于不同寬度圖標(biāo)無法對齊的情況。<divclass="list-group"><aclass="list-group-item"href="#"><iclass="fafa-homefa-fw"aria-hidden="true"></i> 首頁</a><aclass="list-group-item"href="#"><iclass="fafa-bookfa-fw"aria-hidden="true"></i> 關(guān)于我們</a><aclass="list-group-item"href="#"><iclass="fafa-pencilfa-fw"aria-hidden="true"></i> 后臺應(yīng)用編輯</a><aclass="list-group-item"href="#"><iclass="fafa-cogfa-fw"aria-hidden="true"></i> 系統(tǒng)設(shè)置</a></div>拓展使用fa-ulandfa-li輕松的替換無序列表中的默認(rèn)圖標(biāo)。<ulclass="fa-ul"><li><iclass="fa-lifafa-check-square"></i>使用列表類圖標(biāo)</li><li><iclass="fa-lifafa-check-square"></i>輕松的替換</li><li><iclass="fa-lifafa-spinnerfa-spin"></i>無序列表</li><li><iclass="fa-lifafa-square"></i>中的默認(rèn)圖標(biāo)</li></ul>拓展使用fa-border和fa-pull-right或fa-pull-left可以輕易構(gòu)造出引用的特殊效果。<iclass="fafa-quote-leftfa-3xfa-pull-leftfa-border"aria-hidden="true"></i>...獨坐在路邊街角冷風(fēng)吹醒,默默地伴著我的孤影,只想將結(jié)他緊抱,訴出辛酸,就在這刻想起往事,心中一股沖勁勇闖,拋開
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 中醫(yī)象思維專題知識講座
- 2023年智慧停車項目融資計劃書
- 如何開好壽險早會-保險公司早會重要性與操作使用技巧專題分享培訓(xùn)模板課件
- 《理賠的法律約束》課件
- 養(yǎng)老院老人康復(fù)設(shè)施維修人員激勵制度
- 《步長穩(wěn)心顆?!氛n件
- 職業(yè)經(jīng)理人風(fēng)采-新華人壽保險公司新人崗前培訓(xùn)課程之銷售禮儀早會分享培訓(xùn)模板課件
- 《圖書資源利用》課件
- 2024年標(biāo)準(zhǔn)化物流服務(wù)協(xié)議一
- 掛靠消防公司驗收用的合同(2篇)
- 產(chǎn)教融合項目合同5篇
- 期末 (試題) -2024-2025學(xué)年外研版(三起)(2024)英語三年級上冊
- 第三單元 角的度量(單元測試)-2024-2025學(xué)年四年級上冊數(shù)學(xué)人教版
- 第七單元測試卷-2024-2025學(xué)年統(tǒng)編版語文三年級上冊
- 高考志愿填報師資格新版考試題及答案
- 小紅書種草營銷師單選模擬題
- 山哥茶妹IP主題民宿文旅項目定位規(guī)劃策劃案
- 農(nóng)業(yè)面源污染防治與生態(tài)修復(fù)方案
- 天津市河西區(qū)2024年數(shù)學(xué)六年級第一學(xué)期期末質(zhì)量檢測試題含解析
- 阿斯伯格綜合征
- 人教版(PEP)2024年小升初英語試卷(含答案)
評論
0/150
提交評論