CSS伪类::before、::after中使用svg图标

之前用的 iconfont.css 可以设置伪类元素的字体为 iconfont ,然后给伪类的 content 属性值定义 iconfnt 的图标标识就能正常显示了。

但是最近精简代码我把 iconfnt.css 移除了,只保留了 iconfnt.js,这样之前 css 中用上面方法引用的图标失效了。

就一个图标,总不能再把那么大的 css 引进来吧,可以不以直接给伪类设置一个 svg 图标呢?当然是可以的:

给CSS伪类设置svg图标

有两种方式:

设置 content 属性:

#test::before {
  content: url(path/icon.svg);
  width: 200px;
  height: 200px;
}

这种有一个问题,不能设置 svg 的颜色和大小,只能通过修改 svg 代码来实现。

设置 background:

#test::before {
  background-image: url(path/icon.svg);
  width: 20px;
  height: 20px;
  display: inline-block;
}

这样可以通过 background-size 来实现改变图标大小,也无法设置图标的颜色。

未经允许不得转载:Web前端开发资源网 » CSS伪类::before、::after中使用svg图标

推荐阅读:

申请腾讯云免费SSL证书,实现网站https访问

PHPStorm 如何更改文件的打开方式

QQ聊天插件,鼠标划入划出显示隐藏效果。

WDLinux故障 Linux系统网站数据备份笔记

input[type=file]去掉“未选择任何文件”及样式改进

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)