字体图标

在学css的过程中学了字体图标，感觉挺有趣的，就记录下来。

字体图标可以做出和图片一样的事情，可以改变透明度，旋转度等。但本质上还是文字，可以随意的改变颜色，产生阴影等等。

• 可以直接使用网站上有的，比如icomoon字库，链接为：https://icomoon.io/
  接下来说一下怎么使用字体图标：

1. 进入网站，点击中间部分
   
2. 选择字体图标，选择完之后，点击Generate Font，就可以看到自己选择的图标
   
3. 点击下载
   
4. 把下载的文件解压 文件里的东西不能删。
   
   
5. 将fonts复制到项目里。
   
6. 在样式里声明字体
   源代码：
   @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;
   }
   因我放置的位置，我修改了路径 内容为：
   
7. 给盒子使用字体
   
8. 盒子里添加结构
   
   content 里的内容为：
   打开直接解压的文件 ，点击 demo
   
   赋值红色区域的内容 就是 content的内容。

以上就是字体图标的使用方法了。