[Resolved] Numbers in circles as icons

[Marcel]

Please suggest me the best way to insert numbers in circles as icons in GenerateBlocks Headlines, or maybe point me to a website where I can download these icons in SVG format.
For reference, this image is suggestive.
The website address where I found this type of headline is in the Private Information section.

Another approach would be to use Unicode HTML entities and try styling them with CSS.

Which solution do you think is the best?

[David]

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.

[Marcel]

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.

[David]

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

[Marcel]

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 */

Thank you very much!

[David]

Aah sorry my bad – my CSS is broken.

This line:

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

has a broken comment.

it should be (fixed in code above):

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

The broken comment would stop any CSS below it from working.

[Marcel]

There is no problem. That’s how we learn.
All the best!

[David]

Glad to be of help.

[Author]

Posts