直接进入主题，

1、在iconfont上复制svg！ 我先随便复制一个！

2、粘贴代码

<svg t="1569811150152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487" width="200" height="200"><path d="M207.856 928L623.696 512l-415.84-416 96.128-95.84L816.144 512 303.952 1023.84 207.856 928z" p-id="1488"></path></svg>

他其实里面又很多标记的，我们用不到，缩写下！ 只保留 viewBox  xmlns   d=   然后可以再加入一个颜色 fill='自己定义'; 

得到代码

<svg viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg" ><path d="M207.856 928L623.696 512l-415.84-416 96.128-95.84L816.144 512 303.952 1023.84 207.856 928z" fill="#ff6600"></path></svg>

3、浏览器编码

编码：encodeURIComponent 和 解码：decodeURIComponent

按F12  encodeURIComponent 编码下上面的svg

encodeURIComponent('<svg viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg" ><path d="M207.856 928L623.696 512l-415.84-416 96.128-95.84L816.144 512 303.952 1023.84 207.856 928z" fill="#ff6600"></path></svg>')

这时候我们就得到一串编码

4、前面加上前缀

data:image/svg+xml;charset=utf-8,

得到 ，引号不要复制进去了

data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M207.856%20928L623.696%20512l-415.84-416%2096.128-95.84L816.144%20512%20303.952%201023.84%20207.856%20928z%22%20fill%3D%22%23ff6600%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E

好了！试下吧！ 颜色也是可以随便改的！ 看见上面的FF6600没！ 那就是改颜色的！