{"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

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

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

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

You Might Also Like: Elementor Template Kits<\/strong><\/a><\/p>\n\n\n\n

Change and Create Custom Bullet Points in WordPress to custom images<\/h2>\n\n\n\n

Step 1:<\/strong> Insert HTML block in Gutenberg Editor<\/p>\n\n\n\n

\"Gutenberg<\/figure>\n\n\n\n

Step 2:<\/strong> Copy and Paste below HTML snippet into HTML block<\/p>\n\n\n\n

<ul>\n  <li>SEO Is Important for Website<\/li>\n  <li>WordPress Make Website Design Easy<\/li>\n  <li>Shopify<\/a> Use for E-commerce Website<\/li>\n  <li>Wix is also Easy to Use with Drag and Drop Features<\/li>\n  <li>Check Out Free Mc Starters Templates from mcstarters.com<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
\n\t\t\t\t\t\n\t\t\t\t<\/code><\/pre>\n\n\n\n
\"Custom<\/figure>\n\n\n\n
Step 3:<\/strong> Upload icon image into media library. Get Image Here<\/a> and recommend size is 16 x 16.<\/p>\n\n\n\n
\"Custom<\/figure>\n\n\n\n
Step 4: <\/strong>Past Css code into Appearance > Customize > Additional CSS<\/p>\n\n\n\n
ul.mc-bullet-list li {\nlist-style-image:url('#');\n}<\/code><\/pre>\n\n\n\n
Step 5: <\/strong>Replace # with icon image URL. Check the preview in front.<\/p>\n\n\n\n
\"Change<\/figure>\n\n\n\n
Note: If you want to change cross all websites then put this code.<\/p>\n\n\n\n
ul li {\nlist-style-image:url('#');\n}<\/code><\/pre>\n\n\n\n
Change and Create Custom Bullet Points in WordPress to Icons<\/h2>\n\n\n\n
If you want change bullet point into icon then you need to follow these steps. <\/p>\n\n\n\n
Step 1:<\/strong> Follow the Step 1 & 2 to add bullet in Gutenberg editor then move to next step here.<\/p>\n\n\n\n
<ul>\n  <li>SEO Is Important for Website<\/li>\n  <li>WordPress Make Website Design Easy<\/li>\n  <li>Shopify<\/a> Use for E-commerce Website<\/li>\n  <li>Wix is also Easy to Use with Drag and Drop Features<\/li>\n  <li>Check Out Free Mc Starters Templates from mcstarters.com<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
\"Custom<\/figure>\n\n\n\n
Step 2:<\/strong> We put icon using unicode. Unicode is like that . ” \\2714<\/strong>” .  Get Unicode here<\/a>. Copy any icon UniCode.<\/p>\n\n\n\n
\"Free<\/figure>\n\n\n\n
Step 3: <\/strong>Past Css code into Appearance > Customize > Additional CSS<\/p>\n\n\n\n
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
\"Custom<\/figure>\n\n\n\n
Note: If you want to change cross all websites then put this code.<\/p>\n\n\n\n
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
Video Tutorial<\/h2>\n\n\n\n
\n