本文的目标是：使用CSS控制图标的颜色，大小需要一个工具：png转svg工具（如果ui给svg就更好了）iconfont(icontocode)先第一步将icon转成svg格式打开网站https://www.bejson.com/conver...上传下载第二步使用iconfont生成代码打开网址：https://www.iconfont.cn点击图标管理->我的图标，进入我的图标后如下图，点击上传图标，点这里上传选择svg文件如图下图中，上传后点击去除颜色提交上传后自动返回图标管理页面，点击批量操作->批量加入购物车，进入购物车。在购物车中，点击下载代码。第三步是将生成的代码应用到项目中。生成的工程目录如下：点击demo_index.html查看官网给出的使用方法我在工程中使用的是第二种，所以只介绍第二种使用方法。Step1,将iconfont.css复制到你的css样式中Step2,根据iconfont.css中你需要的字体，将生成的字体文件和项目中的svg文件复制到你的项目目录下，需要在同一目录下level为css文件，否则需要在iconfont.xml中修改导入字体文件的路径。ie8和ios4.1-，可以去掉对应的字体，具体见下面的介绍）第三步，使用//或如果改变样式，span{color:red}i{color:red}最后，原理分析1.理解@fontface规则@fontface的本质是一个变量，而这个规则支持的css属性有很多，我们常用的有：font-family、src、font-style、font-weight。字符，但注意不要覆盖系统中已有的字体/*font-family如果是符号需要用引号括起来*/@font-face{font-family:'$'}/*使用iconfont生成的@font-face规则font-family如下：*/@font-face{font-family:'iconfont'}然后看我们关键的src属性，用来引入fonts资源，导入的字体资源可以是本地的（使用local()导入），也可以是外部字体（使用url()导入），注意local只有ie9及以上支持。这里重点关注url函数符号@font-face{font-family:'icon';src:url('icon.eot')format('eot');/*ie6-8*/src:url('icon.eot#iefix')format('embedded-opentype'),url('icon.woff2')format('woff2')url('icon.woff')format('woff'),url('icon.ttf')format('typetrue'),url('icon.svg#icon')格式('svg');}//format的作用是让浏览器提前知道加载字体的格式，从而决定是否加载字体。上面代码中有五种字体格式，分别是eot、woff、woff2、ttf、svgsvg格式是为了兼容ios4.1及之前的版本，目前ios版本已经到了11，所以完全可以放弃eot，这是ie私有的，所有版本的ie都支持eot格式，不只是ie6-8，ie6-ie8只支持eot格式。woff（webopenfontformat）是专门为web开发设计的字体。它的字体较小，加载速度较快，因此应优先使用。Android4.4开始全面支持woff2是woff的第二代，字体文件体积更小，但只有chrome和firefox支持更好的ttf作为系统安装的字体格式，兼容性很好，但是体积更大总结，我们有根据以上结论，svg格式不兼容ie8就果断丢弃，eot格式就丢弃，ttf格式不兼容Android4.3之前的版本就丢弃。“图标字体”；src:url('iconfont.eot?t=1547714990292');/*IE9*/src:url('iconfont.eot?t=1547714990292#iefix')format('embedded-opentype'),/*IE6-IE8*/url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP4AAsAAAAACBgAAAOrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEJINPATYCJAMICwYABCAFhG0HLhvzBhHVm0XJviiwjblCNx4e1RAbqvoScwd3wUWGawQq7bPvQzw8v+7p3Hnv/52F1bbLColMUKi7FapgBBOVZ2CcDsadACIZ7O93+tTc9nW/JuKoRNUmmiAW/joh4qVzC50Q2dyMtzUqQrEk53k/fUfSbiDkVwD8cbjXpgc4313a5Tjnoi7AOJAC3QPXAgmkD/LJv+Mfxi5oibsJNNLNEDGmNWWOUmYOCsSW0/qVyoxcbkgNpVCvmJnFaTVlcaQ4A3Aq+Pn4SjFKCrXEzJixbuwaIz4AKyLtrnZb4iEwptOCzSNhCDIxp1I/TYr8QySNVH/Wi22lBh8uVeXRN/uPRxB1Jr8JxHahXxPDYV4qdQEy7bmG94PORFqVlcjqH+baAbu7AM71qavD+25xUwr1TdTSXbmOgjo6aOTEtdzzhlD07Wfwh3kNLWxrj7Bjinp06gAWdAde7N/YCAfvirOKDa3s6mN/sJ8ePobHHoaNg/S9S30z1dTNb5s47+kQFh7MCP6N69BdPqII7qzvF2OXbAPsvszfu4zfS9cuo4/fe41Hu47H1ORtqTPw0k8353NTd41KqYcHt8d4mj81ujIHd/JT9939WKmT19BaV8T0GUgcUlMYh5QtAZn08c/zD3y/2idiavJz5oyGdIuw8C6CcGkCHZZGgb2tr32WF30s8se1QLHTBzjI4vpTFv32/uArMNIVuOMe/9uiattoCCv1s7JmyNmnsM132Ghb8VY9/qd0iaO4yFgqGsi3pQVkDaEjVc7aqf7juAtroRNgSjfcFDl2BGnfaPlxuxjJ20utDr0Oy/3YZ/qLFceoimHNsa4yGnacG0Tnm91qCBkydLHIzmuI+HxPexAwAlQofaTjX/0d42/y/5Y3r/8vYQbPKfBKYK1QBnQzUt67IfiHjI51WWOZiiIrjMpw4Zr0bkoaaYQKw+ZW3g41tiXRhpIzIBQa6ApJqQ8yY4dATWPDoK40HBoZbPz8xlrbJYncEIMcABBauAqFZu5C0sJjZMa+gZp2vkNdi0jQyLwgV2yM6hdRjWbUgg7MH6LdGtkqUWHqDf27aE6zAvwL+YwumPoxH7piQ55izPnxswgB8VZhBfthKRvsvCW00geRfRkGqrpRb7faKaMZtaAD5g+i3Rp5zUUVvn9D/y6aG2qqtC/kM3YOJr2xA/LKB51QBUWQ8+NNIGSITWPWOMVI+TEWV3DLAKUXBNJ3XYAAAUVD+V7YWVT0WAMSUFGHLJNLH0F+UAWAA='）格式（'woff2'）格式（'真实类型e'),/*chrome,firefox,opera,Safari,Android,iOS4.2+*/url('iconfont.svg?t=1547714990292#iconfont')format('svg');/*iOS4.1-*/}.iconfont{font-family:"iconfont"!important;字体大小：18px；字体样式：正常；-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing：灰度；cursor:pointer;}.icon-play:before{content:"\e601";}这里有两点需要注意，一是字体，二是字符，这两个是字体图标的本质技术字体的本质是字符集和图形的映射关系。字体图标技术的实现是将常用的字符集映射成另一种图标形状。例如，将e601映射到
