3种前端动态设置纯色图标的颜色的方法
共 2292字，需浏览 5分钟
·
2021-07-27 20:13
2、使用png图，利用css3滤镜filter
3、使用字体图标
1、使用svg图
<svg t="1626954008234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2002"width="500" height="500"><path fill="#333333"d="M288.51831055 288.59741211A249.62475586 249.62475586 0 0 0 219.75927734 512c14.87109375-67.4934082 49.83398438-133.44433594 104.29541016-187.9453125C378.55566406 269.53393555 444.5065918 234.59082031 512 219.71972656c-78.50830078-14.79199219-162.75146484 8.12768555-223.48168945 68.87768555z"p-id="2003"></path></svg>
我们可以：
1、修改大小：在<svg> 标签中修改width、height 属性（默认单位是px）
2、修改颜色：在<path> 标签中修改fill 属性，如果没有这个属性，就新增
我们只需要动态设置svg里path路径的颜色值，即可实现图标跟随主题色变化。 使用css来进行修改如下：
<style>svg{width:200px;height: 200px;}svg path{fill:#f00;}</style>
2、使用Png图
该方法存在一定的兼容性，但是移动端基本完全兼容，可以放心使用。利用png图，比svg更简单，它是利用了CSS3滤镜filter中的drop-shadow(drop-shadow滤镜可以给元素或图片非透明区域添加投影）。
用drop-shadow添加投影模糊度为0,再隐藏原图片。
<img src="./cion/test.png"/><style>img {width: 200px;height: 200px;position: relative;left: -50px;border-right: 100px solid transparent;filter: drop-shadow(100px 0px 0 red);}</style>
备注说明：在Chrome浏览器下(低版本)，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。
使用这里使用border-right透明边框来解决兼容问题，如果不考虑Chrome低版本浏览器，可以不使用该属性(以上为例，不使用该属性需要将left值设置为负的100)。
这里利用定位将原图片移除，你需要父元素设置了overflow:hide；或者其他方式来隐藏原图片即可。
3、使用字体图标
字体图标，我们可以轻松的用css来控制字体的颜色，大小，阴影等！方式一使用的svg图片，由于是矢量图片，不会随着图片的伸缩而影响质量，所以我们可以通过工具将svg生成字体图标，放到项目中使用。
你可以借助一个在线生成工具：https://icomoon.io/app/
网上也有很多字体图标库的网站，大家可以下载使用。这里以Font Awesome字体图标库为例：
首页在html文档中的 <head> 部分，引入 font-awesome.min.css 文件。
<link rel="stylesheet" href="../css/font-awesome.min.css">
在页面中使用：
<i class="icon-camera-retro"></i><style>i{font-size: 40px;color: #f00;}</style>
可以看出更加简单，可控。
总结
这里主要介绍了3种最常见，前端动态设置纯色图标的颜色方法。大家可以根据项目需求选择合适的方案，当然除了上面介绍的以外，还有其他方案，大家可以思考下。
学习更多技能
请点击下方公众号
