Resizing an image bullet point

Hello!

I’m working on my first fcc project (tribute page) and having trouble resizing my bullet point. At the moment they’re giant lightsabers when I’d much prefer miniature lightsabers. Can’t seem to find what I need on google; can anyone help?

Here is a link to the codepen (still a lot to do on the CSS side but hope you can excuse the incompleteness): https://codepen.io/trying-my-best/pen/GRgmvra?editors=1100

(also this is my first post but if there’s a way you’re supposed to format these kinds of Qs let me know for next time!)

You can use background-image and set the size. Maybe use flexbox for the alignment.

li {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}


li::before {
  content: "";
  display: inline-block;
  background-image: url(http://novask.in/5107708344139776.png);
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  padding-right: 30px;
}

Edit: if using a background image you may have to adjust things to avoid the image getting cut off, I also change the margin to padding instead.

Or using transform scale.

li {
  display: flex;
  align-items: center;
}

li::before {
  content: url(http://novask.in/5107708344139776.png);
  transform: scale(0.2);
  margin-right: -30px;
}
1 Like