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.
Cory says
February 23, 2017 at 1:16 amThis 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!
ESSALIFI says
April 13, 2017 at 5:02 amVery easy, much thanks
Jana says
September 12, 2017 at 2:23 pmSo helpful … just what I needed. Thank you!
Mohan C says
December 27, 2018 at 2:47 amHow to get multiple digit numbers inside a circle?