Search code examples
htmlcssunicodeweb-frontend

How to change the size of a unicode circle like ⬤ using css?


Trying to place ⬤ inbetween words in a paragraph tag but I want them to be smaller but can't find a way to change the size of it, everything I've tried it just ignores the height change.

Tried ::before with content, placing inside a span, inline html and trying to add styling in the browser

<p>Thing1 ⬤ Thing2 ⬤ Thing3</p>

Pretty much want to reduce the size by half, I tried scale as well as that didn't do anything either. I wanted to avoid using JS for it or just styling a span tag to look the same but not sure if its possible to do it with just CSS?


Solution

  • You can simply change the size by using the font-size property. An example is below, hope this helps

    <i style="font-weight:700; font-size:16px; font-style: normal;">&#9432</i>