分析頁面

1. 拿到別人的HTML頁面，先分析一下頁面結構。

   這里就要用到Chrome的調試工具 按F12 就可以出來。（如果是筆記本，那就要右擊頁面點擊檢查）

image-20200710182752978.png

element 選項下左邊這一欄是HTML代碼，右邊一欄是css代碼。

• 查看頁面對應的HTML代碼 ， 先點一下小箭頭，再點擊你想查看的內容、

  
  
  image-20200710183109146.png

• 調試手機模式 ，點擊這個圖標

image-20200710183200693.png

圖標庫推薦

Font Awesome官網：https://fontawesome.com/

一套絕佳的圖標字體庫和 CSS 框架。 Font Awesome為您提供可縮放的矢量圖標,您可以使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。

Iconfont-阿里巴巴矢量圖標庫 官網：http://iconfont.cn/

阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。 設計師將圖標上傳到Iconfont平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標轉換為字體，便于前端工程師自由調整與調用。

Fontello 官網：http://fontello.com/

可以根據(jù)您的需求很輕松地制作自定義圖標 webfont。

LivIcons Evolution 官網：https://livicons.com/

真正的動態(tài) SVG 圖標。 這是面向 Web 開發(fā)人員和網站所有者的產品。 LivIcons Evolution 是經典 LivIcons 包的下一代現(xiàn)代產品，帶有交叉瀏覽器矢量圖標，每個都有獨立的迷你動畫。 它們基于由 JavaScript 驅動的 SVG（可縮放矢量圖形），適用于所有現(xiàn)代瀏覽器，在任何設備上都看起來很完美。 是的，Retina 也是。

Ionicons 官網：http://ionicons.com/

高級設計的圖標，用于Web，iOS，Android和桌面應用程序。 支持SVG和Web字體。 完全開源，MIT由Ionic Framework團隊授權和構建。

Icons - Material Design 官網：https://material.io/icons/

Google 設計團隊出品，用于常見操作和項目。 在桌面上下載，在Android，iOS和Web的數(shù)字產品中使用它們。

使用Font Awesome（字體太棒了）http://www.fontawesome.com.cn/

image-20200710184039466.png

Font Awesome 字體為您提供可縮放矢量圖標,它可以被定制大小、顏色、陰影以及任何可以用CSS的樣式。

image-20200710184100234.png

看這個介紹感覺蠻牛逼的

如何使用？

1. 下載對應的文件 v4.7（因為v5要錢QAQ）

image-20200710184232081.png

2. 將解壓好的文件拖到自己的項目中（這里之前視頻講錯了）

image-20200710184647589.png

3. HTML引入css

image-20200710184942554.png

4. 開始使用

   你可以通過設置CSS前綴fa和圖標的具體名稱，來把Font Awesome 圖標放在任意位置。Font Awesome 被設計為用于行內元素（我們喜歡用更簡短的<i>標簽，它的語義更加精準）。

   <i class="fa fa-camera-retro"></i> fa-camera-retro
   

   其他操作參考文檔 http://www.fontawesome.com.cn/examples/

5. 尋找圖標http://www.fontawesome.com.cn/faicons/

   找到自己喜歡的直接點擊進去，復制代碼，即可使用。

image-20200710185200630.png