利用属性选择器来优化引用字体图标的代码

传统引用字体图标的步骤：

<!-- 
        1 设置字体图标公共类名iconfont 
        2 打开demo_index.html
          点击Font Class选项卡
          复制图标的类名 添加到标签的class上
-->
    <span class="iconfont icon-qiaokeli"></span>
    <i class="iconfont icon-icon-"></i>

属性选择器的介绍：

       1，属性选择器符号 []
       2，指定属性名的属性选择器 [type]  标签中有type属性名的即可选中
       3，指定属性名和值的属性选择器 [type="password"]  标签中有type属性名并且值为password的标签即可选中
       4，模糊匹配 [class^="red"] 以..开始  shift 6
       5，模糊匹配 [class$="red"] 以..结束  shift 4
       6，模糊匹配 [class*="red"] 只要在值中有指定内容即可选中

众所周知，引入字体图标的时候都需要写一个必写的类名iconfont,而必写这个类名的原因是下面的这段样式

.iconfont{
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

那如果我们给每个图标的类名加上这段样式，不是就可以不用写iconfont这个类名了（想法成立，立马去敲代码）

打开本地的iconfont.css的文件，修改以下代码

.iconfont,
[class*="icon-"] {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

修改完以后去html文件中引用字体图标

<!--原版引用方式-->
<i class="iconfont icon-huoguo"></i>
<!--改进版引用方式-->
<i class="icon-shuibei2"></i>

这样当我们写大项目的时候，就会精简html页面

缺点：我们目前只能修改本地的文件，并不能修改在线引入的iconfont文件

最后希望以后能把在线生成的iconfont文件修改成上面的这种形式