Add Checkmark/Ticks To Your Ul List - WP SITES

Add Checkmark/Ticks To Your ul List Jan 29, 2016

—

by

Brad Dalton

This tutorial for beginners, provides the HTML, CSS & PHP code which enables you to style your unordered lists like this:

The checkmarks are loaded using Ion Icons

Step 1.

Using FTP and a code editor, add the following PHP code to your child themes functions.php file.

add_action( 'wp_enqueue_scripts', 'load_ion_icons' ); function load_ion_icons() { wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION ); }

Step 2.

Add the following HTML to a post, page or text widget.

Step 3.

Add the following CSS to your style.css file.

li { list-style-type: none!important; } ul { margin-bottom: 20px; margin-left: 10px; } ul li { color: #232525; font-family: 'Poppins', sans-serif; font-size: 14px; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } ul.checkmark { margin-top: 20px; } ul.checkmark li:before { font-size: 48px; font-size: 4.8rem; vertical-align: middle; } ul.checkmark li:before { color: #e85555; content: "\f3fd"; display: inline-block; font-family: 'ionicons'; margin-left: -36px; width: 36px; } ul.checkmark li { line-height: 1; padding: 8px 0 8px 36px; }

The code comes from the Digital Pro child theme by StudioPress

4 responses to “Add Checkmark/Ticks To Your ul List”

1. philr April 2, 2016

   Could this also be a way to customize standard ul? I want to have different symbol for 1st and 2nd level ul’s. i.e. solid circle for 1st level, hollow circle for 2nd level. Also increase top margin on 1st level ul

   Regards Phil

   Loading… Reply
   1. Brad Dalton April 2, 2016

      Sorry, don’t understand what you mean. 1st and 2nd level ui’s?

      Loading… Reply
      1. philr April 2, 2016

         Sorry, I talking about UL’s not ui’s. When using bullets (ul), you can indent and create another level. In MS Word and other programs these other levels automatically change to different symbol. I want to use different symbols for different levels and also increase the gap before e.g. – unordered list 1st level, list item * unordered list 2nd level list item * list item * list item

         – unordered list 1st level, list item * list item

         So expanding on your code to add different symbol for different level and spacing between

         Loading… Reply
         1. Brad Dalton April 2, 2016

            Not something i have worked out how to do or published.

            Loading… Reply

Feedback welcomeCancel reply

←Previous: 2 Ways To Add A Text Description Below Featured Images in Genesis Next: Add Next & Previous Product Navigation Links To WooCommerce Single Products→

Discover more from WP SITES

Subscribe now to keep reading and get access to the full archive.

Type your email…

Subscribe

Continue reading

Loading Comments... Write a Comment... Email (Required) Name (Required) Website %d