CSS / SCSS background image as marker for li via :before-CodePudding

this is my first question so I hope its specific enough:

I want to enter a svg check mark sign (https://fonts.google.com/icons?icon.query=check&icon.style=Sharp) in front of each li item, instead of the marker (I already removed in ul).

When I enter it I cannot see the svg image, I can only see something when I enter background color and then not the svg just the background color in the area where the image should be. SVG file is saved in the folder and other svg files in the document work as well.

The code is the following:

ul {
  list-style-type: none;
  li {
    margin-bottom: 1em;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 2.5em;
      height: 2.5em;
      background-image: url("icon-check3.svg");
      background-size: contain;
      background-position: center;
      margin-left: -3em;
    }
  }
}

CodePudding user response：

A bit hard to check without having an actual live example.

Some hints:

Are you sure the icon is referenced correctly? (The path must be relative to the CSS file)

You might try display:block on the ::before element

With position absolute it's mostly better to use top and left (or bottom and right) properties. Negative margins can be helpful, but are logically worse - 'd say.

Is the svg displaying in other contexts?

CodePudding user response：

Basically your code is correct. We're missing the svg itself to debug it. However I did include some check icon as a Static icon font.

li {
  margin-bottom: 1em;
  position: relative;
  list-style: none;
}

li:before {
  font-family: 'Material Symbols Sharp';
  content: "check";
  position: absolute;
  color: lightgreen;
  width: 2.5em;
  height: 2.5em;
  margin-left: -2em;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Sharp:opsz,wght,FILL,GRAD@48,400,0,0" />


<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>

</ul>