版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
學(xué)習(xí)目標(biāo)了解并能概括出Web字體圖標(biāo)的優(yōu)點(diǎn)；熟悉下載字體圖標(biāo)庫的流程；能運(yùn)用FontAwesome字體圖標(biāo)庫提供的圖標(biāo)美化頁面。圖片的缺點(diǎn)增加總文件的大小和很多額外的“HTTP請求”；犧牲用戶體驗(yàn)；在移動端高分辨率上會變得模糊。圖標(biāo)字體化為用戶提供可縮放的矢量圖標(biāo)；可以使用CSS所提供的所有特性對它們進(jìn)行更改；完全開源，完全免費(fèi)FontAwesome一、FontAwesome字體圖標(biāo)庫FontAwesome其實(shí)就是一個圖標(biāo)工具，當(dāng)前的最新版本是4.7.0，常用的有675個圖標(biāo)。有網(wǎng)頁、輔助功能、手勢、運(yùn)輸、性別、文件類型、表單、支付、圖表、貨幣、標(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>...獨(dú)坐在路邊街角冷風(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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024印刷合同協(xié)議書：婚禮請柬定制印刷服務(wù)3篇
- 二零二五版駕校教練團(tuán)隊承包合作協(xié)議3篇
- 二零二五年度航空航天設(shè)備開發(fā)合同中知識產(chǎn)權(quán)全球許可與市場拓展協(xié)議3篇
- 二零二五年度綠色環(huán)保材料供應(yīng)商報價保密與可持續(xù)發(fā)展協(xié)議3篇
- 2025年度項目組成員薪資待遇補(bǔ)充協(xié)議3篇
- 專業(yè)皮草交易協(xié)議樣式版B版
- 2025版廠區(qū)建筑設(shè)施維修保養(yǎng)合同4篇
- 2024離婚協(xié)議書標(biāo)準(zhǔn)參考
- 2024版臨街店鋪?zhàn)鈶{合同范本
- 二零二五年度農(nóng)產(chǎn)品冷鏈運(yùn)輸合同標(biāo)的保鮮技術(shù)4篇
- 2024版?zhèn)€人私有房屋購買合同
- 2025年山東光明電力服務(wù)公司招聘筆試參考題庫含答案解析
- 《神經(jīng)發(fā)展障礙 兒童社交溝通障礙康復(fù)規(guī)范》
- 2025年中建六局二級子企業(yè)總經(jīng)理崗位公開招聘高頻重點(diǎn)提升（共500題）附帶答案詳解
- 2024年5月江蘇省事業(yè)單位招聘考試【綜合知識與能力素質(zhì)】真題及答案解析(管理類和其他類)
- 注漿工安全技術(shù)措施
- 《食品與食品》課件
- 2024年世界職業(yè)院校技能大賽“食品安全與質(zhì)量檢測組”參考試題庫（含答案）
- 讀書分享會《白夜行》
- 2023上海高考英語詞匯手冊單詞背誦默寫表格（復(fù)習(xí)必背）
- 人民軍隊歷史與優(yōu)良傳統(tǒng)（2024）學(xué)習(xí)通超星期末考試答案章節(jié)答案2024年
評論
0/150
提交評論