3种前端动态设置纯色图标的颜色的方法
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种最常见,前端动态设置纯色图标的颜色方法。大家可以根据项目需求选择合适的方案,当然除了上面介绍的以外,还有其他方案,大家可以思考下。
学习更多技能
请点击下方公众号