CSS課件Web字體圖標(biāo)_第1頁
CSS課件Web字體圖標(biāo)_第2頁
CSS課件Web字體圖標(biāo)_第3頁
CSS課件Web字體圖標(biāo)_第4頁
CSS課件Web字體圖標(biāo)_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論