HTML numbers in Circles (the quick way)

Often, we may require to add a number with a circle around that number. For example, let’s say that we have three steps and we want the numbers to display thus;

① ② ③

Most of us immediately think that the simplest solution is to use CSS to style a number with the number centred within a circle. Although CSS allows for many styling options, for numbers from 1 to 20, the quickest and easiest is to use Unicode circled numbers. Unicode HTML entities (HEX or decimal) are so simple to insert into WordPress, Joomla, Shopify, Weebly or most other HTML generating software.

All you need do to use Unicode circled numbers is to search the Unicode character table website and then copy the ‘HTML-code’ into the HTML of your webpage. You may then style the character further by using some basic CSS. For example, below is what the circle digit one looks like when I merely insert the HTML into the ‘Text’ editor in WordPress:

①

①

By adding the following inline CSS to the HTML

<span style="font-size: 450%; color: #FF5722;">&#9312;</span>

we style the number to look as follows:

①

Simple and so quick! Please leave a comment below if you have found this useful.