前端字体图标的使用总结

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

使用字体图标的两种方式：
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)法二

<divclass="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文件地址的场景。

前端字体图标的使用总结相关推荐

前端字体图标,2D变形,以及渐变的使用
一.字体图标下载字体图标(了解) 字体图标的选择,上传 UI美工她们来做的,我们了解即可. 使用字体图标(重点) 引入相关文件(前提) 复制相关的文件,到 fonts文件夹里面. 引入 css & ...
前端字体图标的使用（阿里、icomoon）
阿里字体图标使用首先去阿里图标库官网:http://www.iconfont.cn/ 搜索需要的图标库 -->加入购物车-->点击购物车-->添加到项目(如果有项目直接加入需要的项 ...
web前端字体图标下载
icomoon字库icmoon字库阿里iconfont字库阿里iconfont字库使用方法https://www.bilibili.com/video/BV1pE411q7FU?p=256 ![在 ...
从零开始学前端：字体图标的引入 --- 今天你学习了吗？（CSS：Day18）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:定位 - 今天你学习了吗?(CSS:Day17) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标前言一. ...
前端svg字体图标使用_材质设计图标字体与svg以及如何在角度中使用svg精灵
前端svg字体图标使用 In this article we will compare usage of Google's Material Design Icons, as font and SVG ...
自学前端第二十五:web字体图标使用
web字体图标:本质是字体,伪元素联用的出现一个白色框即字体失效的检查: ①路径那里是不是fonts文件夹的第一子路径就是全部的文件. ②/+unicode编码和转义编码有没有弄棍 (一个给c ...
大前端Dux主题如何添加导航菜单字体图标
对于刚刚接触大前端Dux主题的小伙伴来说,想要在短时间内折腾出一个漂亮大气的网站博客,也并不是那么容易,因为大前端Dux主题的功能真的很多很多,你自己都不知道从那里下手.今天跟小伙伴们说说大前端Dux ...
前端学习之字体图标(iconfont)
Web字体字体格式不同的浏览器支持的字体格式是不一样的. tureTypeFont(.ttf)格式 . ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有I ...

前端字体图标的使用总结

前端字体图标的使用总结相关推荐

最新文章

热门文章