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;">①</span>
we style the number to look as follows:
①
Simple and so quick! Please leave a comment below if you have found this useful.
This is perfect! Exactly what I needed, after fighting with the CSS for like 10 minutes I thought to find another way, this is simple and effective… Kudos man!
Very easy, much thanks
So helpful … just what I needed. Thank you!
How to get multiple digit numbers inside a circle?