CSS and creating border of svg figure

Question

I have file with star in SVG format. How to make border of that figure(not entire square with that star) using css? Also, how make fill that image on hover effect?

I tried to add in html:

<i class="favorite"></i>

and in scss:

.favorite {
  width: 17px;
  height: 16px;
  display: block;
  text-indent: -9999px;
  background-size: 17px 16px;
  background: url(../../../../../assets/images/icon-star.
}

But I dont see anything. When i change background-color to for example red I see white star on red square. How to make it work?

Thanks @Paulie_D for reply. Give me a moment please for updates. — legendarny ziom, Feb 28 '18 at 22:13

score 0 · Accepted Answer · answered Mar 01 '18 at 13:22

You can't change the colours of an SVG that's included via <img> or background-image. You'll need to include it inline in your page. You can then change the colours using the fill and stroke properties.

.square {
  fill: red;
  stroke: blue;
  stroke-width: 4;
}

<div>
  <p>Hello world</p>
  <svg>
    <rect class="square" x="5" y="5" width="100" height="100"/>
  </svg>
</div>

CSS and creating border of svg figure

1 Answers1