CSS：字体图标下载、使用

字体图标是一些网页常见的小图标，可以直接从网上下载。

字体图标的使用可以分为：
1）字体图标的下载
2）字体图标的引入，引入到html页面中。
3）字体图标的追加，就是添加新的小图标。

字体图标的下载

推荐下载网站：

• icomoon字库

https://icomoon.io/

• 阿里iconfont字库
  https://www.iconfont.cn/?spm=a313x.fonts_index.i3.2.7f7b3a81ptg2Pw
  

下面看看怎么从icomoon字库网站下载。
访问icomoon官网：

点击IcoMoon App：

跳转到了下面的页面：

点击自己想要的图标，可以选择多个，在页面的下发显示选择了多少个图标：

如果这里边的图标不够用的，可以拉倒页面底部，点击 Add Icons From Library：

就打开了库的窗口：

想要哪个模块的，就点击 Add：

就会自动添加过来，供我们选择：

除了选择图标以外，还可以在线编辑图标。
点击上面的Edit：

点击自己想要编辑的图标：

就跳出来编辑界面：

可以旋转、移动、缩放、改变颜色：

编辑完毕，就变成自己想要的效果了：

不想编辑了，点击选择箭头：

现在选择了22个图标：

要把这些选中的图标生成字体，点击右下角的 Generate Font F：

就跳转到了下面的页面：

点击页面右下方的Download按钮，就可以下载了：

这个文件下载下来，就表示下载成功了：

字体图标的引入、使用

下载完毕之后，注意原先的文件不要删，后面会用。

将下载下来的icomoon.zip文件解压后，得到如下目录结构：

最重要的文件夹是fonts文件夹，点击进去，有4个不同的字体文件：

之所以有4种字体文件，是为了兼容不同的浏览器，因为不同的浏览器支持的字体格式是不一样的。字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

把下载包里的fonts文件夹放到页面根目录下

在CSS样式中全局声明字体

在CSS样式中全局声明字体，简单地理解就是把这些字体文件通过css引入到我们的页面中。
一定要注意字体文件的路径问题。

将字体文件引入到页面的语法：

 @font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

使用：拷贝字体图标到使用的地方

打开字体图标解压包中的demo.html文件，我们下载下来的字体图标都有展示：

想用哪个图标，就拷贝右侧的小框框到html文件中，这个小框框就是字体图标的特殊符号：

在样式中给使用字体图标的元素指定字体

在样式中给使用字体图标的元素指定字体，必须和@font-face中font-family指明的一样：

现在打浏览器中查看，字体图标就正确显示出来了：

既然字体图标本质是字体，那么就可以随意指定大小、颜色，例如：

现在的展示效果：

咱们如法炮制，在html中再加一个字体图标：

展示效果：