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

OrganicWeb

Mailchimp Training & Consulting

  • Home
  • Services
    • Mailchimp Training
    • Mailchimp Consulting
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • Subject Line Generator
    • Marketing Ideas Generator
    • Map Maker for Email
    • WhatsApp Click to Chat Generator
    • Avoid Email Going to Spam
    • Email Link Generator
    • Is Mailchimp Down?
    • Marketing Facts and Stats
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About

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
  • A responsive countdown timer for Mailchimp
  • How to style SVG with CSS in WordPress

Filed Under: Internet

Watch Gary in action

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

→  Subscribe   ←

How to add an editable attachment to a Mailchimp campaign.

How to add, and send, coupon codes in Mailchimp.

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

You are here: Home / Internet / HTML numbers in Circles (the quick way)

Primary Sidebar

Mailchimp write about my work

Read on Mailchimp.com

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 Rating

Mailchimp Pro Partners

Contact

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

Contact Gary.

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