图标字体(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> ~~~