{"id":19066,"date":"2024-04-13T13:10:32","date_gmt":"2024-04-13T08:10:32","guid":{"rendered":"https:\/\/mcstarters.com\/?p=19066"},"modified":"2024-04-13T13:12:02","modified_gmt":"2024-04-13T08:12:02","slug":"change-a-bulleted-list-into-checkmarks","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/change-a-bulleted-list-into-checkmarks\/","title":{"rendered":"How to change a bulleted list into checkmarks or any other icons in Divi?"},"content":{"rendered":"\n<p>Do you want to change a bulleted list into checkmarks or any other icons in Divi?<\/p>\n\n\n\n<p>Bullet lists are only available in square, circle, and disc symbols. It can be boring. So that is why today we will show you how to change Bulleted List Into Checkmarks.<\/p>\n\n\n\n<p>In this post, we will show you how to change a bulleted list into checkmarks or any other icons in Divi <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/\" rel=\"noreferrer noopener nofollow\">WordPress<\/a>. Bullet lists are the best way to organize information in a well-structured format.<\/p>\n\n\n\n<p class=\"bg-light\">You Might Also Like: to <a href=\"https:\/\/mcstarters.com\/blog\/remove-sidebar-in-divi\/\" data-type=\"link\" data-id=\"https:\/\/mcstarters.com\/blog\/remove-sidebar-in-divi\/\">remove the sidebar in Divi<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Change a Bulleted List into Checkmarks<\/h2>\n\n\n\n<p>Fellow step by step guide to change a bulleted list into checkmarks in the Divi:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text Module and Custom CSS Class<\/h3>\n\n\n\n<p class=\"step\"><strong>Step 1:<\/strong> Add a Text Module to your layout. Open the Text Module settings.<\/p>\n\n\n\n<p class=\"step\"><strong>Step 2:<\/strong> In the Content tab, create a list of bullet items. Go to the\u00a0<strong>\u201cAdvanced\u201d<\/strong>\u00a0tab.<\/p>\n\n\n\n<p class=\"step\"><strong>Step 3:<\/strong> Open the\u00a0<strong>\u201cCSS ID &amp; Classes\u201d<\/strong>\u00a0toggle<\/p>\n\n\n\n<p class=\"step\"><strong>Step 4:<\/strong> Add the class\u00a0<strong><em>\u201cmc-bullet-list\u201d<\/em><\/strong>\u00a0to the\u00a0<strong>\u201cCSS Class\u201d<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/10\/Change-bulleted-list-in-Divi.png\" alt=\"Change bulleted list in Divi\" title=\"\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Paste The CSS Snippets<\/h2>\n\n\n\n<p class=\"step\"><strong>Step 1:<\/strong> After entering the CSS class, you need to copy the below snippets.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-light\"><code>\n\/*bullet checklist by www.mcstarters.com*\/\n.mc-bullet-list ul {\nlist-style-type: none!important;\n}\n.mc-bullet-list ul li:before {\ncontent: 'e052'!important;\ncolor: #2cba6c;\nfont-family: 'ETMODULES'!important;\nmargin-right: 10px;\nmargin-left: -14px;\n}<\/code><\/pre>\n\n\n\n<p class=\"step\"><strong>Step 2:<\/strong> <strong>Go to Divi &gt; Theme Options<\/strong>&nbsp;and at the bottom of the default \u201cGeneral\u201d tab, paste the CSS snippet into the \u201cCustom CSS\u201d box and save changes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/10\/Change-Bullets-list-to-icon-in-Divi.png\" alt=\"Change Bullets list to icon in Divi\" title=\"\"><\/figure>\n\n\n\n<p>Successfully, you change a bulleted list into checkmarks or any other icons in Divi by following these steps. You can change the code using a different style icon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusions<\/h2>\n\n\n\n<p>There is no limit to customizing the design in Divi. If you customize the bullet list and do customs CSS follow the above steps.<\/p>\n\n\n\n<p class=\"bg-light\"><a href=\"https:\/\/mcstarters.com\/blog\/add-custom-css-to-divi\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/mcstarters.com\/blog\/add-custom-css-to-divi\/\" rel=\"noreferrer noopener\">3 ways to Add Custom CSS to Divi<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1640603621302\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How can you customize a bulleted list in Divi?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>We can customize a bulleted list in Divi using custom CSS. here is the custom CSS code.<br \/>\/*bullet checklist by www.mcstarters.com*\/ <br \/>.mc-bullet-list ul { list-style-type: none!important; } .mc-bullet-list ul li:before { content: &#8216;e052&#8217;!important; color: #2cba6c; font-family: &#8216;ETMODULES&#8217;!important; margin-right: 10px; margin-left: -14px; }<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1640603912587\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do you change bullets to check marks divi?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To change bullets to checkmarks \u2705  also need to add custom css in Divi &gt; theme option &gt; CSS.  \/*bullet checklist by www.mcstarters.com*\/ <br \/>.mc-bullet-list ul { list-style-type: none!important; } .mc-bullet-list ul li:before { content: &#8216;e052&#8217;!important; color: #2cba6c; font-family: &#8216;ETMODULES&#8217;!important; margin-right: 10px; margin-left: -14px; } <\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p class=\"has-text-align-center bg-blue\">You Might Also Like to Hire: <a href=\"https:\/\/mcstarters.com\/services\/divi-theme-experts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Divi Theme Experts<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to change a bulleted list into checkmarks&#8230;<\/p>\n","protected":false},"author":5,"featured_media":19067,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[2,6],"tags":[400,488,417,491],"class_list":["post-19066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-divi","tag-create-custom-bullet-points","tag-divi-guide","tag-divi-icons","tag-divi-tips"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/19066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/comments?post=19066"}],"version-history":[{"count":0,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/19066\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/19067"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=19066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=19066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=19066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}