Question

我有一个脚本，可以使用字体真棒图标打开/关闭按钮。

我确实希望使用我创建的SVG精灵并在CSS中相应地更改颜色，但我不知道如何更改html和CSS以反映SVG。

我也需要SVG也能用于其他浏览器。

感谢。

$('.favorite').click(function() {
  $(this).toggleClass('favorited');
});

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
 html {
  position: relative;
  background: linear-gradient(135deg, #5ccccc 0%, #288080 100%);
  height: 100%;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.favorite {
  position: relative;
  width: 40px;
  height: 40px;
  color: #fff;
  border: 0;
  background: transparent;
}
.favorite:before {
  content: '\f08a';
  font-family: 'FontAwesome';
  font-size: 18px;
  position: absolute;
  top: 10px;
  left: 9px;
}
.favorite.favorited:before {
  content: '\f004';
  color: red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="container">
  <button class="favorite"></button>
</div>

。

Answer 1

通过CSS为SVG图像着色的最简单方法是使用-webkit-mask-image属性来更改颜色。一个例子是这样的。

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

但是在Firefox浏览器中不支持，如果您希望在多个浏览器中获得支持，则可以使用CSS过滤器。但是你需要找出每种颜色的配置，这是一项非常重要的工作。您可以了解更多here

我通常做的和最简单的方法是将所有SVG图像转换为我通常在fontello.com网站上执行的字体图标。它简单，轻便，快速解决方案。希望它有所帮助。

使用SVG图标作为按钮而不是使用字体真棒

1 个答案: