• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Marketing Strategy Facilitators & Mailchimp Pro Partners

  • Home
  • Services
    • Mailchimp Live Public Classes
    • Mailchimp Corporate/Team Training
    • Mailchimp Consulting
    • Marketing Strategy & Planning
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • 5 day Mailchimp marketing boost
    • Map maker for email
    • Is Mailchimp down?
    • Marketing facts and stats.
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About
You are here: Home / Internet / HTML numbers in Circles (the quick way)

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.

Found this useful? Please share:

Related

  • How to use Font Awesome icons as backgrounds in WordPress
  • How to style SVG with CSS in WordPress
  • Why you must use tables ... for email newsletters

Filed Under: Internet

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to create a lead-capture form with file download.

How to target your most engaged Mailchimp contacts.

Reader Interactions

Comments

  1. Cory says

    February 23, 2017 at 1:16 am

    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!

    Reply
  2. ESSALIFI says

    April 13, 2017 at 5:02 am

    Very easy, much thanks

    Reply
  3. Jana says

    September 12, 2017 at 2:23 pm

    So helpful … just what I needed. Thank you!

    Reply
  4. Mohan C says

    December 27, 2018 at 2:47 am

    How to get multiple digit numbers inside a circle?

    Reply

Leave a Reply Cancel reply

Primary Sidebar

Free Mailchimp Tutorial

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer ratings

Mailchimp pro partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2021 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service