html中调整颜色的图标,在CSS中设置SVG图标颜色

CSS

语言:

CSSSCSS

确定

.icon {

display: inline-block;

width: 50px;

height: 50px;

background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22\a%20%20%20viewBox%3D%220%200%2030%2030%22%20enable-background%3D%22new%200%200%2030%2030%22%20xml%3Aspace%3D%22preserve%22%3E\a%3Cpath%20fill%3D%22%23F84830%22%20d%3D%22M18.7%2C10.1c-0.6%2C0.7-1%2C1.6-0.9%2C2.6c0%2C0.7-0.6%2C0.8-0.9%2C0.3c-1.1-2.1-0.4-5.1%2C0.7-7.2c0.2-0.4%2C0-0.8-0.5-0.7\a%20%20c-5.8%2C0.8-9%2C6.4-6.4%2C12c0.1%2C0.3-0.2%2C0.6-0.5%2C0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8%2C0.3\a%20%20c-0.5%2C2.5%2C0.3%2C5.3%2C2.1%2C7.1c4.4%2C4.5%2C13.9%2C1.7%2C13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6%2C10%2C19.1%2C9.6%2C18.7%2C10.1z%22%2F%3E\a%3C%2Fsvg%3E");

}

body {

text-align: center;

font-family: Merriweather;

font-size: 18px;

line-height: 1.7;

padding: 10vw;

background: #333;

color: #eee;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值