WP SITES

Log in

Add Checkmark/Ticks To Your ul List

—

by

Brad Dalton

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

list-style-checkmarks

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

Comments

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

  1. philr Avatar
    philr

    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

    1. Brad Dalton Avatar
      Brad Dalton

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

      1. philr Avatar
        philr

        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

        1. Brad Dalton Avatar
          Brad Dalton

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

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.