{"id":2117,"date":"2021-04-25T12:38:39","date_gmt":"2021-04-25T12:38:39","guid":{"rendered":"https:\/\/zeroniche.com\/?p=2117"},"modified":"2022-01-20T13:30:00","modified_gmt":"2022-01-20T13:30:00","slug":"custom-list-css","status":"publish","type":"post","link":"https:\/\/zeroniche.com\/custom-list-css\/","title":{"rendered":"Custom CSS Checkmark List in WordPress [Easy Method]"},"content":{"rendered":"\n<p>Here's how to add some nice checkmarks or tick mark graphics to your WordPress blog posts without having to add custom fonts or plugins. By not using custom-loaded fonts or plugins, we can edit the listicle graphics as we see fit and create them in CSS. Your site will load faster and perform better in <a rel=\"noreferrer noopener\" href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520?hl=en\" target=\"_blank\">Google's Core Web Vitals<\/a> ranking factor.<\/p>\n\n\n\n<p>The second reason to create list and headings icons and graphics in CSS code is that this helps make your lists or headings stand out. Bullet points are boring. Custom bullet points are cool.  This also makes your listicle articles easier for people to consume. And it's a proven fact that people like to share listicle articles.<\/p>\n\n\n\n<p> So what are you waiting for? Make your WordPress post headings and lists look amazing.<\/p>\n\n\n\n<ul><li>unstyled, unordered list item &#8211; boring, same old bullet list icon<\/li><\/ul>\n\n\n\n<ul class=\"bluecheck\"><li>custom CSS-styled list item &#8211; a cool, custom checkmark on a blue background that really stands out<\/li><\/ul>\n\n\n\n<p>Add this CSS code to the Additional CSS section in the <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.com\/support\/customizer\/\" target=\"_blank\">WordPress Customizer<\/a>.<\/p>\n\n\n\n<p>Now, whenever you create a list and add your descriptor class, you will get really nice-looking checkboxes before each item.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ul.bluecheck li:before {\nmargin: 0 0 0 -40px;\nlist-style-type: none;\nposition: absolute;\ncolor: #fff;\ncontent: \"\\2713\\0020\";\nfont-size: 15px;\nbackground: #83bf5d;\npadding: 2px;\nborder-radius: 20px;\nwidth: 30px;\ntext-align: center;\n}<\/pre>\n\n\n\n<p>The above code targets unordered lists (generally represented by bullet points). If you want to target an H2 for example, change the first line to <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">h2.bluecheck:before<\/pre>\n\n\n\n<p>You can also specify the font family by adding font-family: followed by the font name.<\/p>\n\n\n\n<h2 class=\"bluecheck wp-block-heading\">Here's a h2 with a custom CSS blue tick<\/h2>\n\n\n\n<p>To add a checkmark or tick before any item (such as a list item), simply select the block in the Gutenberg editor and then make sure the sidebar is showing &#8220;block&#8221; instead of &#8220;post&#8221;. Scroll pass HTML anchor to Additional CSS class(es).<\/p>\n\n\n\n<p>And add a descriptor for the list style. I use &#8220;greentick&#8221;. You can use whatever you like but make sure to change it in the CSS.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"401\" height=\"1024\" src=\"https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/setting-custom-css-for-block-in-wordpress-editor-401x1024.png\" alt=\"setting custom css for block in wordpress editor\" class=\"wp-image-2120\" srcset=\"https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/setting-custom-css-for-block-in-wordpress-editor-401x1024.png 401w, https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/setting-custom-css-for-block-in-wordpress-editor-117x300.png 117w, https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/setting-custom-css-for-block-in-wordpress-editor.png 561w\" sizes=\"(max-width: 401px) 100vw, 401px\" \/><\/figure><\/div>\n\n\n\n<p>There you go. An quick way to create a cool CSS Checkmark List in WordPress without a single line of HTML code. Sure, we added CSS, but that's easy.<\/p>\n\n\n\n<p>Have you made any cool styles with CSS for lists in WordPress? Let me know in the comments!<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/custom-unordered-list-icons-css-wordpress.png\" alt=\"custom unordered list icons css wordpress\" class=\"wp-image-2138\" width=\"342\" height=\"512\" srcset=\"https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/custom-unordered-list-icons-css-wordpress.png 1000w, https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/custom-unordered-list-icons-css-wordpress-200x300.png 200w, https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/custom-unordered-list-icons-css-wordpress-683x1024.png 683w, https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/custom-unordered-list-icons-css-wordpress-768x1152.png 768w, https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/custom-unordered-list-icons-css-wordpress-380x570.png 380w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s how to add some nice checkmarks or tick mark graphics to your WordPress blog posts without having to add custom fonts or plugins. By not using custom-loaded fonts or plugins, we can edit the listicle graphics as we see fit and create them in CSS. Your site will load faster and perform better in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"Custom CSS Checkmark List in WordPress [Easy Method]","_seopress_titles_desc":"Learn how to add a custom checkmark icons to your lists or headings in WordPress with CSS alone. Easy to do. Loads fast! looks amazing!\r\n","_seopress_robots_index":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[167],"tags":[],"featured_image_src":"https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/easy-custom-listicle-icons-in-WordPess-600x400.png","featured_image_src_square":"https:\/\/zeroniche.com\/wp-content\/uploads\/2021\/04\/easy-custom-listicle-icons-in-WordPess-600x600.png","author_info":{"display_name":"KJ","author_link":"https:\/\/zeroniche.com\/author\/bhixe\/"},"_links":{"self":[{"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/posts\/2117"}],"collection":[{"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/comments?post=2117"}],"version-history":[{"count":0,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/posts\/2117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/media\/2137"}],"wp:attachment":[{"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/media?parent=2117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/categories?post=2117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/tags?post=2117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}