圖標字體(iconfont)在網頁中經常需要使用一些圖標,可以通過圖片來引入圖標但是圖片大小本身比較大,并且非常的不靈活所以在使用圖標時,我們還可以將圖標直接設置為字體,然后通過font-face的形式來對字體進待這樣我們就可以通過使用字體的形式來使用圖標 怎么講圖標做成字體這是設計師干的，我們拿來用就行 網上有很多圖標庫，如阿里的iconfont和Font Awesome 調整大小用font-size 以Font Awesome為例：使用字體圖標 [Font Awesome，一套絕佳的圖標字體庫和CSS框架 (dashgame.com)](https://fontawesome.dashgame.com/#google_vignette) ``` //方法1：通過偽元素設置圖標字體 li::before{ content: "\f1b0"; font-family: 'Font Awesome 5 Free'; /*font-family: 'Font Awesome 5 Brands';*/ font-weight: 900; color:blue; margin: 5px; } <li>hellow</li> //方法2：通過類設置圖標字體 <i class="fas fa-cat"></i> //方法3：通過實體設置圖標字體 實體是&開頭;結尾,字體圖標里面裝#x加上圖標編碼 <span class="fas">&#xf1b0;</span> ``` ## **iconfont** [iconfont-阿里巴巴矢量圖標庫](https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.5&type=1) 阿里字體圖標用那個下載哪個（里面的版權不太明確）  下載后index.html有使用說明  ~~~html <span class="iconfont">&#xe633;</span> ~~~ 或者 ``` p::before{ content: "\e633"; font-family: 'iconfot'; font-size: 100px; } <p>hello</p> ``` css類 ~~~html <link rel="stylesheet" href="./iconfont.css"> ~~~ 然后在項目中引入圖標 ~~~html <span class="iconfont icon-browse"></span> ~~~