1

Im trying to use an svg as background image but nothing shows up. I got the svg from icomoon.io.

Here is svg:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
</svg>

and this is the css:

&__item::before {
    content: "";
    height: 2rem;
    width: 2rem;
    margin-right: .7rem;
    background-image: url(../img/SVG/chevron-thin-right.svg);
}

This is in React if that makes any difference. Thank you

Amadeus Aleksei
  • 41
  • 8
  • Add `display:block;` for the before. In order to understand what happens add a border to the before. (without the display:block it collapses to width:0) – enxaneta Aug 03 '22 at 19:21
  • 1
    @enxaneta ah thank you. Adding the display: block; made it appear This makes sense. Thank you so much! – Amadeus Aleksei Aug 03 '22 at 19:42

0 Answers0