圖示字體（iconfont）
------我們在網頁中會發現一些小圖示，可以通過圖片引入圖示，但是圖片本身比較大，應用起來非常的不靈活，所以在這里給小伙伴們介紹一個叫“圖示字體”的小玩意~~
這里是京東主頁搜索框中的一個相機小圖示
首先介紹一下引入圖示字體的三種方式
一、直接通過類名來使用圖示字體
二、使用偽元素來設定圖示字體
三、通過物體設定圖示字體
下載圖示字體的資源~
官網鏈接
下載解壓完后需要將CSS和webfont兩個檔案夾移動到專案檔案中
注：font檔案夾是我新建來存盤這兩個檔案的,方便查看，
完成上述步驟后接著將CSS中的all.css引入
一、通過類名來使用圖示字體
在標簽內使用style可以設定圖示文字的樣式
查看圖示名稱前的fa或者fas這些可以使用API檔案查看
這篇文章有詳細安裝和介紹Font AwesomeAPI檔案的步驟
二、使用偽元素來設定圖示字體
- 在要設定圖示文字的元素中添加偽元素before或者after選中
- 在content中填寫想要的圖示字體的編碼
- 設定字體的樣式
*
箭頭所指的兩項均為必需的，可以在all.css中查看，*
三、通過物體設定圖示字體
到這里就結束了，希望這篇文章可以幫到有需要的小伙伴
有什么不足的歡迎在評論區留言~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277044.html
標籤：其他
上一篇：angular速成小技巧
下一篇：HTTP常見的回應狀態碼