0

How to set fill on SVG inside content using hexadecimal code? The first button works ok when fill='red' but I can't set it to fill='#da3737' in the second button.

.btn {
  padding: 0 0 0 1.5rem;
  color: color(secondary_2);
  position: relative;
  display: inline-block;
}
.btn:after {
  content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 64 64'%3E%3Cpath fill='red' d='m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z'/%3E%3C/svg%3E");
  position: absolute;
  left: 0;
  top: 60%;
  transform: translateY(-50%);
}

.btn2:after {
  content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 64 64'%3E%3Cpath fill='#da3737' d='m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z'/%3E%3C/svg%3E");
}
<a href="#" class="btn">Click</a>
<br>
<a href="#" class="btn btn2">Click2</a>
Ivan Topić
  • 3,064
  • 6
  • 34
  • 47

1 Answers1

1

The # must be encoded as %23.

.btn {
  padding: 0 0 0 1.5rem;
  color: color(secondary_2);
  position: relative;
  display: inline-block;
}
.btn:after {
  content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 64 64'%3E%3Cpath fill='red' d='m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z'/%3E%3C/svg%3E");
  position: absolute;
  left: 0;
  top: 60%;
  transform: translateY(-50%);
}

.btn2:after {
  content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 64 64'%3E%3Cpath fill='%23da3737' d='m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z'/%3E%3C/svg%3E");
}
<a href="#" class="btn">Click</a>
<br>
<a href="#" class="btn btn2">Click2</a>
Sean
  • 6,873
  • 4
  • 21
  • 46