Filled “o” character in unicode or imitated via CSS

Question

I need to write this text in HTML:

I tried to use some unicode characters like ● Unicode Character \'BLACK CIRCLE\' (U+25CF) or ⬤ Unicode Character \'BLACK

Answer 1

I would suggest to use CSS border-radius to create the solid "o" circle.

span {
    font-family: sans-serif;
    font-size: 50px;
}
i {
    display: inline-block;
    text-indent: -9999px;
    width: 30px;
    height: 30px;
    background: black;
    vertical-align: middle;
    border-radius: 50%;
}

<span>N<i>o</i>w.</span>

Answer 2

If you really want filled O character and not an ugly circle, the only (and rather simple) way to archive this is to edit your font and create filled "O" character. Sounds rather frightening, but it is an easy task to accomplish. You can make a new font or add your custom character to existing font. For font editor you can use FontForge, for example.

Here is an example on how I made it with Percolator-expert font:

https://github.com/jehy/Storyteller-Dots

P.S. If you want just a circle, using custom font is also better because you have out-of-box control over font size.

Another solution - use unicode characters, provided by many fonts:

◉ ○ ● □ ■ You can output it with the following code:

◉ ○ ● □ ■