Check and Cross Bullets

How to Add Check and Cross Bullets in WordPress

Posted on by Prakash Tiwari

WordPress lets you create bullet points to organize information. But sometimes, simple black dots don’t stand out. You may want to use checkmarks for positives and cross marks for negatives. These symbols make your lists more straightforward and more visually appealing.

Adding checks and cross-bullets in WordPress is easy. In this guide, you will learn step-by-step ways to add checkmarks and cross marks in WordPress.

Why Use Check and Cross Bullets?

Checkmarks and cross marks make lists more straightforward to read. They help in:

  • Pros and cons lists
  • Feature comparisons
  • Step-by-step guides
  • Product specifications

For example:

  • Fast loading speed
  • Mobile-friendly design
  • No free plan
  • Limited customization options

Now, let’s explore different ways to add them to WordPress.

Method 1: Use Keyboard Shortcuts

The easiest way to add check and cross symbols is by using keyboard shortcuts.

Steps for Windows Users

  1. Place the cursor where you want the symbol.
  2. Hold Alt and type the following numbers on the numeric keypad:
    • (Checkmark): Alt + 10003
    • (Cross Mark): Alt + 10007
  3. Release Alt, and the symbol will appear.

Steps for Mac Users

  1. Place the cursor where you need the symbol.
  2. Press Option + V for.
  3. Press Option + Shift + V for.

These shortcuts work in most text areas, including the WordPress editor.

Method 2: Copy and Paste Symbols

You can copy and paste check and cross symbols if you don’t want to use shortcuts.

Checkmarks: ✔ ✓ ✅ ☑
Cross Marks: ✘ ❌ ❎ ❗

Steps to Copy and Paste

  1. Copy the symbol from above.
  2. Go to your WordPress post or page.
  3. Paste the symbol where needed.

This is the fastest method and works on all devices.

Method 3: Use HTML Codes

Use the WordPress Classic Editor or Text Mode to add check and cross symbols with HTML codes.

Checkmark HTML Codes

✔ = ✓  

✓ = ✔  

✅ = ✅  

☑ = ☑

Cross Mark HTML Codes

✘ = ✗  

❌ = ❌  

❎ = ❎  

❗ = ❗

Steps to Use HTML Codes

  1. Open your WordPress post editor.
  2. Switch to Text Mode (HTML View).
  3. Copy and paste the HTML code where you need the symbols.
  4. Switch back to Visual Mode to see the symbols.

This method works well if you need symbols inside buttons, headings, or tables.

Method 4: Use a WordPress Plugin

If you don’t want to use codes or copy-pasting, plugins can help.

Best Plugins for Adding Icons

  • Shortcodes Ultimate
  • WP SVG Icons
  • Font Awesome

Steps to Add Check and Cross Icons Using Shortcodes Ultimate

  1. Go to Plugins > Add New.
  2. Search for Shortcodes Ultimate.
  3. Click Install Now and Activate.
  4. Open a post or page in the editor.
  5. Click the Insert Shortcode button.
  6. Choose Icon and select checkmark or cross.
  7. Click Insert Shortcode and publish the page.

Now, check and cross marks will appear without using codes!

Method 5: Use Custom CSS for Stylish Check and Cross Bullets

You can customize bullet points using CSS. This method works if you want consistent styles across all pages.

Steps to Customize Check and Cross Bullets with CSS

  1. Go to Appearance > Customize.
  2. Click Additional CSS.
  3. Add this code:

ul.check-list li::before {

    content: “✔”;

    color: green;

    font-weight: bold;

    margin-right: 10px;

}

ul.cross-list li::before {

    content: “✘”;

    color: red;

    font-weight: bold;

    margin-right: 10px;

}

  1. Click Publish.

How to Use the Custom Bullet List

  1. Edit your post.
  2. Switch to Text Mode (HTML View).
  3. Wrap your list inside <ul class=”check-list”> or <ul class=”cross-list”>.

Example:

<ul class=”check-list”>

   <li>Fast performance</li>

   <li>Easy to use</li>

</ul>

<ul class=”cross-list”>

   <li>No free version</li>

   <li>Limited customization</li>

</ul>

This method automatically applies check and cross marks to all lists without manually inserting symbols.

Method 6: Use Font Awesome Icons

If you want animated or colorful check and cross icons, use Font Awesome.

Steps to Use Font Awesome in WordPress

  1. Go to Appearance > Theme Editor.
  2. Open the header.php file.
  3. Add this inside the <head> section:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css”>

  1. Click Update File.

Now, you can use these icons in posts:

✔ <i class=”fas fa-check-circle” style=”color:green;”></i>  

✘ <i class=”fas fa-times-circle” style=”color:red;”></i>

Font Awesome icons are scalable and work well on all devices.