{"id":19193,"date":"2024-02-19T18:10:12","date_gmt":"2024-02-19T13:10:12","guid":{"rendered":"https:\/\/mcstarters.com\/?p=19193"},"modified":"2024-03-26T20:14:56","modified_gmt":"2024-03-26T15:14:56","slug":"change-and-create-custom-bullet-points-in-wordpress","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/change-and-create-custom-bullet-points-in-wordpress\/","title":{"rendered":"How to Change and Create Custom Bullet Points in WordPress"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">WordPress is a free open source blogging tool that helps the blogger to organize text. In WordPress, bullet points refer to a way of presenting information using unordered lists. Bullet points are small dots or symbols placed before each item in a list to create a visual hierarchy and make the content more scannable and organized.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress also provides options to customize the appearance of bullet points. You can change the style, size, and color of the bullets by modifying the CSS (Cascading Style Sheets) of your WordPress theme or by using custom CSS plugins.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But In this post, We will show how to Change and Create Custom Bullet Points in WordPress. We do this with some lines of CSS snippets.<\/p>\n\n\n\n<p class=\"bg-light wp-block-paragraph\">You Might Also Like: <a href=\"https:\/\/mcstarters.com\/free-elementor-templates\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/free-elementor-templates\/\" rel=\"noreferrer noopener\"><strong>Elementor Template Kits<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Change and Create Custom Bullet Points in WordPress to custom images<\/h2>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 1:<\/strong> Insert HTML block in Gutenberg Editor<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/11\/Gutenberg-Change-Bullet-Points-in-Wordpress.png\" alt=\"Gutenberg Change Bullet Points in WordPress\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 2:<\/strong> Copy and Paste below HTML snippet into HTML block<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>&lt;ul&gt;\n  &lt;li&gt;SEO Is Important for Website&lt;\/li&gt;\n  &lt;li&gt;WordPress Make Website Design Easy&lt;\/li&gt;\n  &lt;li&gt;<a  class=\"btl_autolink_hyperlink\"  href=\"https:\/\/mcstarters.com\/blog\/shopifyaff\"    target=\"_blank\" rel=\"nofollow\">Shopify<\/a> Use for E-commerce Website&lt;\/li&gt;\n  &lt;li&gt;Wix is also Easy to Use with Drag and Drop Features&lt;\/li&gt;\n  &lt;li&gt;Check Out Free Mc Starters Templates from mcstarters.com&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\t\t\t\t\t\n\t\t\t\t<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/11\/Custom-Image-bullet-point-wordpress-editor.png\" alt=\"Custom Image bullet point wordpress editor\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 3:<\/strong> Upload icon image into media library. Get <a href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Image Here<\/a> and recommend size is 16 x 16.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/11\/Custom-Icon-For-Bullet-Points.png\" alt=\"Custom Icon For Bullet Points\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 4: <\/strong>Past Css code into Appearance &gt; Customize &gt; Additional CSS<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>ul.mc-bullet-list li {\nlist-style-image:url('#');\n}<\/code><\/pre>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 5: <\/strong>Replace # with icon image URL. Check the preview in front.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/11\/Change-bullet-point-WP.png\" alt=\"Change bullet point WP\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Note: If you want to change cross all websites then put this code.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>ul li {\nlist-style-image:url('#');\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Change and Create Custom Bullet Points in WordPress to Icons<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want change bullet point into icon then you need to follow these steps.&nbsp;<\/p>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 1:<\/strong> Follow the Step 1 &amp; 2 to add bullet in Gutenberg editor then move to next step here.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>&lt;ul&gt;\n  &lt;li&gt;SEO Is Important for Website&lt;\/li&gt;\n  &lt;li&gt;WordPress Make Website Design Easy&lt;\/li&gt;\n  &lt;li&gt;<a  class=\"btl_autolink_hyperlink\"  href=\"https:\/\/mcstarters.com\/blog\/shopifyaff\"    target=\"_blank\" rel=\"nofollow\">Shopify<\/a> Use for E-commerce Website&lt;\/li&gt;\n  &lt;li&gt;Wix is also Easy to Use with Drag and Drop Features&lt;\/li&gt;\n  &lt;li&gt;Check Out Free Mc Starters Templates from mcstarters.com&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/11\/Custom-Image-bullet-point-wordpress-editor.png\" alt=\"Custom Image bullet point wordpress editor\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 2:<\/strong> We put icon using unicode. Unicode is like that . &#8221; <strong>\\2714<\/strong>&#8221; .&nbsp; Get <a href=\"https:\/\/www.toptal.com\/designers\/htmlarrows\/symbols\/\" target=\"_blank\" rel=\"nofollow noopener\">Unicode here<\/a>. Copy any icon UniCode.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/11\/Free-Icon-Unicode-WordPress.png\" alt=\"Free Icon Unicode WordPress\" title=\"\"><\/figure>\n\n\n\n<p class=\"step wp-block-paragraph\"><strong>Step 3: <\/strong>Past Css code into Appearance &gt; Customize &gt; Additional CSS<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>ul.mc-bullet-list li {\nlist-style-type: none!important;\n}\nul.mc-bullet-list li:before {\ncontent: '\\2714'!important;\ncolor: green;\nmargin-right: 10px;\nmargin-left: -14px;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" decoding=\"async\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/11\/Custom-css-for-bullet-point-wordpress-1024x472.png\" alt=\"Custom css for bullet point wordpress\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Note: If you want to change cross all websites then put this code.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>ul li {\nlist-style-type: none!important;\n}\nul li:before {\ncontent: '\\2714'!important;\ncolor: green;\nmargin-right: 10px;\nmargin-left: -14px;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Change And Create Custom Bullet Points In WordPress\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/D5pT454eFcI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I hope you done this task easily but&nbsp; if you still face problem then comment below we will help you asap.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Faq: Change and Create Custom Bullet Points in WordPress<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1711465950803\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I customize Bullets in WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can customize bullets in WordPress with the help of custom CSS.<\/p>\n<p><code>ul.mc-bullet-list li { list-style-type: none!important; } ul.mc-bullet-list li:before { content: '\\2714'!important; color: green; margin-right: 10px; margin-left: -14px; }<\/code><\/p>\n<p> <code>.mc-bullet-list<\/code> is class name. <\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>WordPress is a free open source blogging tool that helps the blogger to organize text. In WordPress, bullet points refer to a way of presenting information using unordered lists. Bullet points are small dots or symbols placed before each item in a list to create a visual hierarchy and make the content more scannable and [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":19194,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[400,319],"class_list":["post-19193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-create-custom-bullet-points","tag-wordpresstips"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/19193","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=19193"}],"version-history":[{"count":0,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/19193\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/19194"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=19193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=19193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=19193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}