图标可以用于页面的很多地方,通常来说,我们使用的是通过字体来实现小图标 
但是当我们需要使用自己的图片时,也可以将svg图片转换为字体,实现图标

在<a href="https://icomoon.io/app/">icoMoon</a>网站,可以将svg转换为字体 
(这里需要注意不要给svg填充颜色,不然会按照颜色分成多块)
然后我们可以在css里写入
<pre style="background-color:#fff">@font-face {
 font-family: &#39;icon-OhYee&#39;;
 src: url(&#39;/fonts/icon-OhYee.eot?nz90s1&#39;);
 src: url(&#39;/fonts/icon-OhYee.eot?nz90s1#iefix&#39;) format(&#39;embedded-opentype&#39;),
 url(&#39;/fonts/icon-OhYee.ttf?nz90s1&#39;) format(&#39;truetype&#39;),
 url(&#39;/fonts/icon-OhYee.woff?nz90s1&#39;) format(&#39;woff&#39;),
 url(&#39;/fonts/icon-OhYee.svg?nz90s1#icon-OhYee&#39;) format(&#39;svg&#39;);
 font-weight: normal;
 font-style: normal;
}
 
.icon-OhYee {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: &#39;icon-OhYee&#39; !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

/* 这里按照具体生成的字符编码写 */
.icon-OhYee::before{
 content: &#34;\e904&#34;;
}
</pre>在使用时可以按照通常的字符图标一样使用,只需要把图标名改为OhYee就会显示我们自己的图标
<table>
<thead>
<tr>
<th style="text-align:left">效果</th>
<th style="text-align:center">描述</th>
<th style="text-align:left">源码</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">单独使用</td>
<td style="text-align:left"><code>&lt;i class=&quot;icon-OhYee&quot;&gt;&lt;/i&gt;</code></td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">加上颜色</td>
<td style="text-align:left"><code>&lt;span style=&quot;color:pink&quot;&gt;&lt;i class=&quot;icon-OhYee&quot;&gt;&lt;/i&gt;&lt;/span&gt;</code></td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">按照正常的font icon格式使用</td>
<td style="text-align:left"><code>&lt;i class=&quot;icon icon-OhYee&quot;&gt;&lt;/i&gt;</code></td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">indigo主题的1.5倍大小</td>
<td style="text-align:left"><code>&lt;i class=&quot;icon icon-OhYee icon-lg&quot;&gt;&lt;/i&gt;</code></td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">indigo主题的2倍大小</td>
<td style="text-align:left"><code>&lt;i class=&quot;icon icon-OhYee icon-2x&quot;&gt;&lt;/i&gt;</code></td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">indigo主题的3倍大小</td>
<td style="text-align:left"><code>&lt;i class=&quot;icon icon-OhYee icon-3x&quot;&gt;&lt;/i&gt;</code></td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">indigo主题的4倍大小</td>
<td style="text-align:left"><code>&lt;i class=&quot;icon icon-OhYee icon-4x&quot;&gt;&lt;/i&gt;</code></td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">indigo主题的5倍大小</td>
<td style="text-align:left"><code>&lt;i class=&quot;icon icon-OhYee icon-5x&quot;&gt;&lt;/i&gt;</code></td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">indigo主题的5px右边距</td>
<td style="text-align:left"><code>&lt;i class=&quot;icon icon-OhYee icon-pr&quot;&gt;&lt;/i&gt;</code></td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">indigo主题的5px左边距</td>
<td style="text-align:left"><code>&lt;i class=&quot;icon icon-OhYee icon-pl&quot;&gt;&lt;/i&gt;</code></td>
</tr>
</tbody>
</table>

把svg图片转换为图标