Numbers in circles as icons

Hi there,

i had a look around and there are actually very few decent circle number SVGs that i could find.
What i would do is this - first add this CSS - it applies on:

.entry-content {
  counter-reset: h2counter;
}

.numbered {
  display: flex;
  align-items: flex-start;
}

.numbered:before {
  content: counter(h2counter);
  counter-increment: h2counter;
  counter-reset: h3counter;
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-right: 0.75em;
  border-radius: 40px;
  font-size: 20px;
  font-weight: 700;
  background-color: #f00; /* change color of circle */
  color: #fff;
}

Then for each heading you want to add a number beside you can select the block and in Advanced > Additional CSS Class(es) add: numbered

It should auto-count the headings and display a number on the front end beside each numbered heading.

Thank you very much, David!
The solution offered by you is very useful. The only thing I can't do is change the color of the number in the circle, even if I add "! Important" at the end. This aspect is not very important, but I still wonder what the cause would be.

Can you share a link to the page where i can see the issue?

I found the trick. I put the color before the background-color in your CSS snippet, and now it is OK.

color: #fff; change color of number*/
background-color: #f00; change color of circle */