前端字体图标的使用总结

有时候我们业务中会遇到需要字体图标的场景比如同一个图标在不同的地方显示不同的颜色，这个时候使用字体图标就很适合，这个场景我遇到了好几次。

使用字体图标的两种方式：
1.让设计给出图标的svg文件，上传到iconfont上，然后再下载就可以和使用iconfont方式一样去使用了。

2.通过css的mask属性直接引入svg文件 再通过样式改变图标颜色和大小

a)法一

<div class="icon"></div>

.icon {
   width: 16px;
   height: 16px;
   mask: url('xxx.svg') no-repeat center center;
   mask-size: contain;
   background-color: xxx;
}

b)法二

<div
   class="icon"
   :style="{
   width: '24px',
   height: '24px',
   mask: `url(${url/xxx.svg}) center center / contain no-repeat`,
   '-webkit-mask': `url(${url/xxx.svg}) center center / contain no-repeat`,
   'background-color': 'black',
    }"
></div>

法一和法二都是在vue项目中的写法，由于mask属性浏览器兼容性还有点问题(下图可以看到)，需要加上浏览器前缀（如-webkit-）才能正常使用。法一vue中会自动加上前缀不需要额外处理；法二写在模版中不会自动j加上前缀,需要手动加上。

从上图我们可以知道 mask属性IE浏览器是不支持的；Edge、Chrome、Safari、Opera浏览器需要加上-webkit-前缀才能使用；Firefox浏览器从53版本开始完全支持；（图片来源  Can I Use 2021-03-14截图）

上传到iconfont和法一适合图标文件固定不变的场景，而法二更适合图标是由后端动态返回一个svg文件地址的场景。