CSS(6) 使用字体图标

1、下载字体图标
    阿里巴巴字体图标库：https://www.iconfont.cn/  icomoon字体图标库：https://icomoon.io/
    解压下载的字体图标库
    将解压的所有文件放到项目中的font文件夹下（切记保存所有的文件）
2、使用字体图标
    1.定义字体
    @font-face {
      font-family: 'iconfont';
      src: url('iconfont.eot');
      src: url('iconfont.eot?#iefix') format('embedded-opentype'),
          url('iconfont.woff2') format('woff2'),
          url('iconfont.woff') format('woff'),
          url('iconfont.ttf') format('truetype'),
          url('iconfont.svg#iconfont') format('svg');
    }
    注意路径
    2.定义使用字体图标的样式
    .myIconFont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    3.运用伪元素实现字体图标中某个图标的使用
    .myfont1::before{
        content:"\eb63";//这里的值为你需要使用的某个图标的编码，可在下载的字体图标文件夹中的demo_index.html中看到
    }
    4.html中调用样式
    <div class='myIconFont myfont1'><div>
    class='myIconFont myfont1' 这2个属性值缺一不可，前面的表示字体图标的样式，后一个表示使用的具体是那个图标
    这样在页面就能看到一个图标字体了
    
    注意：如果myIconFont样式表和.myfont1::before样式表不在同一个css文件中，那么火狐浏览器会找不到这个图标
    
3、追加字体图标
    如果字体图标不够用了，需要新增字体图标，那么需要在https://icomoon.io/网站中将现有图标导入（阿里貌似不行）
    进入https://icomoon.io/，点击icomoom app
    再点击import icons按钮，选择现有字体图标库中的svg文件
    选择导入的所有图标，在选择新增的图标
    下载所选的图标