把svg图片转换为图标

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

可以将svg转换为字体
(这里需要注意不要给svg填充颜色,不然会按照颜色分成多块)

然后我们可以在css里写入

@font-face {
    font-family: 'icon-OhYee';
    src:  url('/fonts/icon-OhYee.eot?nz90s1');
    src:  url('/fonts/icon-OhYee.eot?nz90s1#iefix') format('embedded-opentype'),
      url('/fonts/icon-OhYee.ttf?nz90s1') format('truetype'),
      url('/fonts/icon-OhYee.woff?nz90s1') format('woff'),
      url('/fonts/icon-OhYee.svg?nz90s1#icon-OhYee') format('svg');
    font-weight: normal;
    font-style: normal;
}
  
.icon-OhYee {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icon-OhYee' !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: "\e904";
}

在使用时可以按照通常的字符图标一样使用,只需要把图标名改为OhYee就会显示我们自己的图标