Replace Bullets With Icons
Turn Bullets Into Check Marks in Divi
You may have noticed we sometimes use checklists here on the blog and in our child themes for sale. I decided to show you how easy it is to change bullet lists into check marks in Divi with just a few snippets of CSS code that you can use globally on your Divi website.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
How to Use The CSS Snippets
1. Add a CSS class to your text module
Add a Text Module to your layout.
Open the Text Module settings.
In the Content tab, create a list of bullet items.
Go to the “Advanced” tab.
Open the “CSS ID & Classes” toggle
Add the class “pa-bullet-list-1” to the “CSS Class” (change the class number to 2 depending on which snippet you use below)
2. Paste the CSS snippets below into your Divi>Theme Options>Custom CSS box
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
Circle Checkmark
- These are Great
- They look nice
- People like them
- They are easy to make
/*bullet checklist by www.peeayecreative.com*/
.pa-bullet-list-1 ul {
list-style-type: none!important;
}
.pa-bullet-list-1 ul li:before {
content: '\e052'!important;
color: #2cba6c;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}Circle X
- These are Great
- They look nice
- People like them
- They are easy to make
/*bullet chekclist by www.peeayecreative.com*/
.pa-bullet-list-2 ul {
list-style-type: none!important;
}
.pa-bullet-list-2 ul li:before {
content: '\e051'!important;
color: #e03574!important;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}How To Modify Our Check Mark To Make Your Own Bullet Lists In Divi
Once you have the base code above you can now use any icon that you would like. The icons I use here are ETModules icons, which come standard with Divi and you can view a list and grab from their blog for free. The rest of this tutorial will be a simple example of how to add other icons of your choice.
Once you have copied the code from the icon that you want, you will need to find the original code in the first snippet listed above and replace it. In this example, the ๒ (the checkmark) is used. NOTE: Always remove the &#x.
If your icons are not showing, please make sure to disable the Dynamic Icons setting in Divi>Theme Options>Performance. Also ask Elegant Themes to fix this issue ;)
Thanks for sharing this. Didn’t want to install Font Awesome because I figured Divi had checkmark symbols I needed somewhere in the theme. I did need to retype apostrophes around the icon code and font family. My new list looks great.
Hi Dan,
Yes that’s exactly why I created this using the built-in icons! So sorry about the apostrophes, I can’t seem to resolve that issue. It must be my OS doing it, or a plugin perhaps. Glad you got it working!
No problem I’ve run into this before when copying code, thankfully you noted it in the instructions.
The problem has something to do with “right” and “straight” apostrophes and how various text editors handle the two. This will give you some insight, but I couldn’t find a solution:
https://stackoverflow.com/questions/4902236/apostrophes-changes-when-i-copy-and-paste
Maybe someone else will chime in with the answer.
Thanks again,
Dan
Hi, thank you! It worked for me only with “”:
content: “\e052”!important;
Hi Aleksandra, I’m glad you got it to work!
No bueno! Followed to a T and even read the note at bottom.
Hi Drew, that’s strange because what you see here on the page is the actual code working in real time. I would be happy to take a look at what you are trying, just provide the link.
Cannot get this to work ???
Hi Leanne, what steps have you tried and can you share a link? Also, did you see my note about the apostrophes?
Hey, I can’t seem to get this to work for the pricing tables on divi – the excluded element on the pricing table keeps the green tick styling even when I change the classes.
Hey Nikhil,
If you share the link I can take a look what’s going on there on your site.
id like to get this to work in divi price table also can you help me?
Sure, all you have to do is change the CSS class. If you share a link I can give you the exact code.
Worked nicely for me.
Except now the headings don’t line up. they start half way through the icon left of the text.
Is there something that can be done about this?
Hi Cohill,
I’m not sure what you mean, can you provide a link or screenshot? You can try adjusting the CSS as needed for the spacing and position of the icons.
The title does not line up with the text below it, is set in a bit. It is as if it has one or two spaces before the title starts. The bullets (well I ‘ve got stars) line up with the beginning of the spaces. Does this make sense?
I’m building the site at the moment, I can’t provide a link. Where can I upload a screenshot?
You just need to adjust the spacing in the CSS. Change the margin-left: -14px; to something else like -30px and play around until you find what works for your situation.
Thank you for this tutorial. Can you share how to make the lists stay aligned with the bullet when you have long sentences. I found this CSS code but can’t figure out how to to add it.
ul#myList {
list-style-position:outside;
}
Hi Susanna,
That’s not going to work because we actually replace the bullet list. You just need to adjust the spacing in the CSS. Change the margin-left: -14px; to something else like -30px and play around until you find what works for your situation.
Hi, How would you increase the size of font and still have the bullets in line with the text, when I do it the text drops down out of line with the bullet.
Thanks,
Andrew
Hi Andrew,
Just change the font size in the CSS snippet to match. Depending what you are doing, you might need to add a line-height to the CSS as well.
This is not working for me.
Hey Michelle,
It should, so let’s figure out what is wrong. Can you share a link along with the steps you took?
Dear mister Miller, a deep bow of respect! Just what I needed! thank you
Hi Nelson,
It’s a very useful blog. I was struggling with font family, icon code. But your blog and video made it easy for me. Really, awesome. Thank you dear..
Hi Anagha,
I’m glad you are enjoying my blog and videos! It’s so nice to hear feedback like that, thank you!
Excellent explanations as always! Thanks a million!
You are welcome Francine! Glad to be of service 🙂
Hey, is there a way to have both x and ticks in one form? I can’t seem to work it.
Hi Matt,
Great question, I assume you mean to have them both in the same bullet list? You can do that with some CSS tricks using “nth”, so for example .pa-bullet-list-1 ul li:nth(1):before { and add your code for the x and then do it again for nth(2) and add your code for the check.
Hi Nelson,
Thank you so much for the code snippets it looks so great. Like Matt I am also trying to have x and check in a same list. Actually its a table in a text module and I’m needing x and checks in different cells throughout the table. I have added the nth to the code but I am not entirely sure how it works and am unsure how to add that to my text module to get it to work. Do I need to add two classes to the text module?
Hi Niki,
I’m not sure how this would work with tables. It’s easy with just a bullet list if you want to try that. Just send me the link and I’ll share some code.
Thanks for the great and easy to follow instructions. I have a question though – how can I get the text that wraps around to a second line be justified and not under the tick icon?
Cheers, Jo.
Hi Jo,
For that, just play around with the spacing (margin left) in the snippet. In other words, you need to move the icon off to the left.
Hi it is showing a marker so instead of the :before element try using something like this for long text:
ul li::marker { color: #BC9D63; font-family: "ETmodules" !important; content: '\e052'!important; }Hi! Great tutorial! Followed it exactly. I read in the comments here that some folks had trouble. At first, I didn’t notice the style take effect, but I purged my cache and the new bullets appeared.I do have one question; how do I keep the hanging indent alignment when list items run to more than one line?
Hi Adam,
You can refer to some of the other comments for this, since it is answered many times, but basically just adjust the spacing values in the CSS.
Hello lovely Nelson, I left a comment on the YouTube tutorial and thank you so much for answering 😁, however, I have checked everything, and purged cache etc. and I still can’t get it to work and my boring bullets are still unchanged. I am sure it’s me doing something wrong, so I apologies for being a pain, but I wondered if there was any other advice you have please?
I noted the comment about the apostrophes, and re-input those, but still nothing.
I have taken a couple of screenshots to show the code and where I have put it (I’m sure it’s in the right spot), but I don’t know how to upload it.
Please help if you can, thank you SO much.
Is there a trick to getting the second line to indent? Please see attached mobile screenshot. Thanks!
Hi Mike, yes, just adjust your margin left and right and it will all line up however you want.
hey thanks, but there is a little down arrow before the icon,, how do i remove the arrow?
Hi Paul,
I need some context here 🙂
Hi Nelson, amazing as usual!
In case anyone also wants to use this awesome fix in the pricing table module I added the CSS class to the row settings (price module on has custom CSS in advance toggle)
Works great – thanks again
Thanks Spencer!
HI! Worked like a charm. I am having trouble with the line spacing though. The “text line height” adjustment is not working? Just me?? Thanks
Hi Lisa, make sure you are not adjusting the text line height, but rather the bullet text line height. You first have to click on the bullet list tab.
OK…I’ll check it out. Thanks!
Thank you for sharing. This worked perfectly, thanks!
You’re welcome, Lori! So glad this helped!
Beginner divi question here from a copywriter trying to learn all things DIVI for my new website – I have done step 1 OK, when copying the code from step 2, do I place this CSS at the top or at the bottom of the of the existing chain or code, or doesn’t it matter so much?
That would not matter, whether at the top or bottom of your existing code. Organize however you like 🙂
I get a series of symbols after adding it to my site, see photo below… ever seen that before?
Hi Matt,
Make sure to add a forward slash \ before the content icon code. (Divi sometimes strips it out)
I must be blind, also a real novice here. It didn’t seem to change anything but should I see a slash \ in your code above?
Nevermind, I was missing the backward slash, but it works now! Thank you!
Hi,
I need to adjust alignment vertically as the tick is slightly higher than the text. I tried using margin, padding and font size but to no effect.
https://teachban-artgallery.com/?page_id=238123
Is there a way of aligning the tick vertically?
Many thanks
Neil
Hi Neil,
I wouldn’t be able to see that link since it is from the editor, but yes, absolutely. Just change any of the values, or add margin or line height.
Thanks for getting back to me Nelson. Changing line height didn’t work and margin-top and margin-bottom changes had no effect. Thelink I posted should work now (forgot to publish!)
It works fine. You can use position: relative; and top: 2px and that should work perfect.
I’m using:
position: relative !important;
margin-top: 2px !important;
And mine still isn’t centered.
You can try using vertical-align: middle;
vertical-align: middle; worked perfectly! Thanks!!
Worked perfectly. Thank you!
You’re welcome Julia!
Worked easily but the default bullet is showing with check mark. How can I show just the check mark?
Hi Farrell,
The first part of the snippet removes those, are you adding that with the custom class?
.pa-bullet-list-1 ul {
list-style-type: none!important;
}
I am seeing this same issue. I do have this included in the css:
/*bullet checklist by http://www.peeayecreative.com*/
.pa-bullet-list-1 ul {
list-style-type: none!important;
}
Hi Jeff,
Could you please share the URL of the page where you are seeing the bullet points for me to investigate further on the issue?
Figured it out – you have to go into the Divi text module and select Design – Text – UL tab, scroll down ad select NONE from the bullet type drop down list
Hi Jeff,
I am glad that the issue is resolved now. 🙂
Please let us know if you have any other query.
Excellent. Worked after a while but it was a problem with my Divi not saving correctly. Soon as I slowed down it worked perfect. Perhaps you can shortcut another issue on a similar line to this. None of the other examples I have found so far have explained it as clearly as you have. I am trying to get an image to appear as a bullet and I have managed; of sorts. I can only make it work by applying it to the entire site in the Additional CSS. When I try to add it using your method I am getting stuck. Should I be applying the extra to clear the existing bullets first or is the image function different?
ul{
list-style-image:url(‘My image going in here all ok’);
}
Many Thanks, Peter.
Could you please share the URL of the page where this issue is happening so that I could investigate further?
Sorted it.
Thought I had deleted to much by accident but realised it worked.
This is how it went.
.mybullet li
{
list-style-image:url(‘https://my details in here of course-mechanic-icon-6.png’);
}
With the mybullet in the css class section.
I did not see; just the dot before the mybullet call.
Great! I am glad that the issue is resolved now. 🙂
Thanks a lot! this worked like a charm!
Glad to hear that Christian! You’re quite welcome.
Thanks for this works great. The only issue is when a list item wraps down to another line, these subsequent lines don’t align nicely with the text of the line above.
Blair, that can all be adjusted in the code. My tutorials are meant as starting points, the values of margin etc. can be changed.
Thanks for the css – how do I make the actual tick white? I’m using a transparent/dark background and want the tick to stand out more. The circle is a green. thanks
Hi Zaid,
For that you would simply change the hex value where it says color: #xxxxxx
Thanks for the tutorial
I can’t seem to get the tick to display.
I even replace the single quote to double quote. But still doesn’t work.
You’re welcome to share what isn’t working and a link if you want some help.
All good I resolved it. Thank you for the code
You’re welcome!
Hi Nelson,
Thanks for the great tutorials! Slightly off topic here but still lists 🙂 Is it possible to have a 1, 1.1, 1.2, 1.3, 1.4 numbered list? Thanks!
Hi Niki,
Please paste the code given below in Divi > Theme Options > Custom CSS Panel to achieve the desired results:
.pa-bullet-list-1 ul{
counter-reset: item ;
}
.pa-bullet-list-1 ul li{
display: block;
}
.pa-bullet-list-1 ul li:before{
content: "1."counters(item, ".") " ";
counter-increment: item;
}
Let me know if that helps. 🙂
Amazing thank you so much I will give it a go!
Not working when there’s no any other icon on page. Looks like font is not loading in that case. When I add any module with icon it starts to show my custom icons, but it is a bad fix.
Hi Adam,
Could you please share the URL of the page where you facing the issue for me to investigate further?
Hi Nelson,
When I tried this the Icon only appears when I’m using the Visual Builder. As soon as I exit the builder my bullets disappear.
Here is the code I’m using and the URL of the page:
/*bullet checklist by http://www.peeayecreative.com */
.pa-bullet-list-1 ul {
list-style-type: none!important;
}
.pa-bullet-list-1 ul li:before {
content: “\e064”!important;
color: #622f7f!important;
font-family: ‘ETMODULES’!important;
margin-right: 10px;
margin-left: -30px;
font-size: 1.2em!important;
}
http://marthadusage.kinsta.cloud/beyond-abuse-about-the-book/
Thanks for any guidance on this.
Nevermind Nelson. They just started to show up after I made some additional edits to the page. I had even tried to clear cache and use a private browser. It wasn’t until I made other additions to the page that they decided to appear.
Thanks for the tutorial.
Hi Greg,
We are glad that the issue is resolved now. Please let us know if you need any other help.
Hi PAC! Thanks so much for all of your helpful tutorials – they are so helpful!
I recently used your custom bullet list code to add some custom bullets in a website I’m building. These bullets (small documents, “\68” and small arrows, “\3d”) look great in the Visual Builder, but when I exit the Visual Builder, they default to ‘h’ and two small horizontal lines, respectively. Any ideas on a fix?
Here’s the CSS script I used:
/* ### This creates custom bullet points; must match
* CSS class on bulleted text in desired modules ### */
/*bullet checklist by http://www.peeayecreative.com*/
.custom-bullet-list-arrow ul {
list-style-type: none!important;
}
.custom-bullet-list-arrow ul li:before {
content: ‘\3d’!important;
color: #BA0C2F;
font-family: ‘ETMODULES’!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}
.custom-bullet-list-doc ul {
list-style-type: none!important;
}
.custom-bullet-list-doc ul li:before {
content: ‘\68’!important;
color: #BA0C2F;
font-family: ‘ETMODULES’!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}
Hey Bryan,
Could you please go to Divi > Theme Options > Performance tab and disable all the settings there and see if that helps? If this solves the issue then enable the settings one by one to see which is creating the issue.
Let me know how it goes.
How can I get the bullet to be in line with the text here is the URL https://chatalbashlessons.com/piano-lessons-kids-teens/
Hey Demitris,
I have checked the URL provided and I am not able to spot the bullets on the page. It would be great if it’s fixed already but if it’s not, could you please guide me where I can see those bullet points?
Hey thanks for the awesome solution here. As with Greg above I can see the new bullet icons in the visual builder but they don’t display when I exit the builder. Could you have a look please?
https://staging.signals.co.nz/push-to-talk-over-cellular/
Hi Kieron,
It might be a caching issue so could you please go to Divi > Theme Options > Builder > Advanced and click on the clear button to clear the Divi cache, save the changes, and then check again and see if that helps.
Let me know how it goes.
Hi there I added the code and the icons are displaying within the divi-builder and in the customizer screen, but they do not display on the front end of the website. Can you please help with some advice as to what I’m missing?
Could you please try using this snippet and see if that helps?
.pa-bullet-list-1 ul li:before {
content: '\4e'!important;
background-color: #2cba6c;
font-family: 'ETMODULES'!important;
margin-right: 10px;
font-size: 1em!important;
color: #fff;
border-radius: 50%;
padding: 0.1em
}
For the cross sign, you can place \4d instead of \4e and change the background color to red.
Let me know how it goes.
Here’s a tip for anyone that can’t get this to work, applicable to Greg’s comment above. The icons were displaying for me in the builder and the customizer screen but not on the website front end. It was like the icons font “ETmodules” wasn’t loading. What I did was add a BLURB (which uses the icons) element into the page and then hid it with CSS. This must’ve activated the font to load on that page and the icons then appeared as normal. The page looks great now! Thanks for the code.
Hey Kieron,
We appreciate that you are addressing the issue and trying to help but the reason that the icons are not showing up when you exit the builder view is the Dynamic Icons Setting that is present in the Divi > Theme Options under the performance tab. Disabling this option will display the icons on the frontend properly.
Hey Nelson,
Thanks for the code! It’s very helpful to find ways for people like me that know enough to get into trouble. 🤣
However (you knew that was coming), it works for me on the backend but does not on the front end. I have tried all manners of quote combos but all I get is an outlined E051 (firefox) or nothing at at all (chrome, Safari). It seems to me that the ETmodule font is not loading on my site?
Here’s the url of an instance: https://guidemktg.com/can-your-customers-find-you/ (the Action Steps)
Any help would be awesome.
Hey Josh,
Could you please go to the WordPress Dashboard > Divi > Theme Options > Performance Tab and disable the Dynamic Icon Option and see if that helps?
Let me know how it goes.
Woohoo!!!!!! That did it. You are a master. Thank you, kind sir.
You’re welcome Josh!
I had the exact same problem, this solution did the trick! The solution should be added to the article to give it more exposure as I’m sure there is other people struggling with this exact issue
Hey Nelson, this is a great resource. I get an issue when the text is longer than fits on one single line, and wraps around to the next line but it doesn’t aline with the bullet settings. (Kind of replicated it here below)
• Unresolved trauma and pain including the emotions, fears, and false beliefs that are the result of unresolved trauma
• Self-judgment, self-rejection, self-loathing, self-hatred, unforgiveness, and so on for where you have hurt others
Hope you can help. Thanks
Rob
Hey ROB,
Could you please tell me where I can spot this issue on the URL you provide for me to investigate the issue?
Hi this works great. The only problem is that when the bulleted text is longer than one line, it doesn’t indent the text on the next line.
Hey, I found a solution, I just changed the number of margin…
margin-left: -30px;
Hey David,
I am glad that the issue is resolved now. Please let us know if you need any further assistance.
Hi, Thanks for sharing this info, I was looking for something similar for my website.
However on my divi editor after adding the code, I can see it working fine, then when visiting the website on my laptop there is no bullet point at all, and on my mobile all I can see is a puppy…
Do you know what might be happening?
Maybe check your performance settings and turn off Dynamic Icons
Thank you, it was that.. solved the issue! 🙂
Hey Juan,
Great to hear the issue is resolved now. Let me know if you need any further assistance.
This is so helpful, thank you! When i paste the code below, I end up with BOTH purple square check boxes (which I want) AND the original circle checks that you include in the demo. I can’t figure out where they are hidden! Any ideas?
/*bullet checklist by http://www.peeayecreative.com*/
.pa-bullet-list ul {
list-style-type: none!important;
}
.pa-bullet-list ul li:before {
content: “\5a;”!important;
color: #93278F;
font-family: ‘ETMODULES’!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}
Hi Laura
Could you try this code once?
.pa-bullet-list ul li:before {
content: ‘\5a’!important;
color: #93278F;
font-family: ‘ETMODULES’!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}
Let me know if it helps. 🙂
Thanks so much for your response! Unfortunately, this made the bullet dissappear all together. The text is indented, but no symbol appears.
Hey Laura,
Could you please share the URL of the website for me to investigate further?
You’re welcome Katrijn!
Hi Nelson
Thank you for this fantastic tutorial. I am however having some issues getting the alignment correct. When I type a sentence and press enter to break into a new row, the word is placed right underneath the Icon
Example:
* Place your sentence here
continue sentence here.
(the Asterix is my icon for this example)
Is there some CSS code I can use to align this?
Hey Lambert,
I am not able to see the issue on my end. Could you please guide me on where I can find it exactly on the website?
Hi. Your CSS desafortunately doesn’t work for me. I can see the custom checkmark in Divi builder mode, but they disappeared when I go in preview mode or I publish the page :/
Even after adjusting the setting at the end?
On mobile iphone SE my starts (on website) turn into christmas trees. You know how i can fix this?
I have no idea what you mean.
Nelson,
Thank you for this code. It has mostly worked for me, however I need help creating space between bullet points. I have tried adding a margin-bottom: but it doesn’t seem to do it. Any suggestions?
Thanks
Hey Howard,
I feel that this issue is fixed on the website.
Nelson,
This is a follow up to my previous comment.
I added
ul > li, ol > li {
padding-bottom: 8px;
}
This did work. I have padding-bottom within each bullet css class but that doesn’t work. Any idea why.
Thanks,
Howard
Hi!
Thanks for your great and comprehensive tutorial!
A funny thing happened here on my site, yet not functional enough to keep it.
I wanted to add the exact checkmark you used in your example, I followed the steps and inside the visual builder everything looks great.
But…….in real life the checkmark appears as the DOG EMOJI!!!
Couldn’t find the mistake.
Dynamic Icons are disabled.
Now that is weird, this is the first I ever heard of that crazy thing happening! Not really sure!
Thanks, but this is probably an outdated technique. I could not even upload the ET fonts to the Divi text module. I got error messages citing an unsupported file type or simply one not granting permission to upload.
I’m not sure what you mean, there is nothing to upload and it is not outdated.
I made a few alterations to your code and thought you and or others may want to try it out…
.pa-bullet-list-1 ul {
list-style-type: none!important;
}
.pa-bullet-list-1 ul li:before {
content: ‘\e052’!important;
color: #ffc418;
font-family: ‘ETMODULES’!important;
margin-right: 10px;
margin-left: -14px;
font-weight:100;
font-size: 1.8em!important;
vertical-align: middle;
}
Hi McTesty!
The alteration seems great. Thank you for sharing!
Thank you for a fantastic tutorial. I am having two icons show up. Here is my screenshot: https://www.screencast.com/t/zgiSyGcQCV
I am using the following code:
/*bullet checklist by http://www.peeayecreative.com*/
.pa-bullet-checkmark ul {
list-style-type: none!important;
}
.pa-bullet-checkmark ul li:before {
content: ‘\4e;’!important;
color: #2cba6c;
font-family: ‘ETMODULES’!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}
/*bullet chekclist by http://www.peeayecreative.com*/
.pa-bullet-gift ul {
list-style-type: none!important;
}
.pa-bullet-gift ul li:before {
content: ‘\e073;’!important;
color: #e03574!important;
font-family: ‘ETMODULES’!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}
I also tried the code that you had sent to Laura above, who was having similar issues. It also made my icons disappear altogether. My URL was placed in the website form field.
Thanks in advance for your help!
That’s odd, not sure! Seems like there is another set of code adding the icons or something?
Hi!
I tried to make the icons bigger, but they don’t line up with the text anymore. Do you have some additional CSS for that?
Right you would need to adjust all the values in the code to work, just play around with them.
How to use this on Widget/Footer?
It’s been years since I used that, since I use the Theme builder now. But you could target the CSS class of the widget.
Hi, the bullets appear great within the Divi environment, but when its saved and I reviewed with Safari, Chrome, or Firefox either the bullets don’t appear or just the number appears (e052) in a small square
Hi Carol!
The icon code you shared above is not correct. Please use this code “\e052” and see if it helps. If the issue still happens, then share the URL of the page to investigate further.
Thanks for this. When the bulleted text flows to the next line, it is not aligned with the start point of the first line. Is there a way to have them line up nicely?
Hi Steve!
Please change the margin-left value in the above code to -28px and see if it helps!
Hello I used this code. This also works wonderfully.
The only problem I have is that it changes the color of the icon in the smartphone view.
How can I avoid this or rather change it?
/*bullet chekclist by http://www.peeayecreative.com*/
.pa-bullet-list-2 ul {
list-style-type: none!important;
}
.pa-bullet-list-2 ul li:before {
content: ‘\e02d’!important;
font-family: ‘ETMODULES’!important;
margin-right: 10px;
font-size: 0.9em!important;
color: #ffc700;
border-radius: 50%;
padding: 0.0em
}
Hi Dirk!
I have checked the code and the icon color is not changing on mobile. There must be some other code causing the issue. Can you share the URL of the page to investigate further?
I’m inserting a check box in place of the bullet point. I’m seeing a Z instead of the check box when viewing the site as a customer, but the check box is there when viewing whilst logged in. I’m using Litespeed cache and not sure if that is causing the problem but cannot work out why.
You can see an example here: https://www.creativephotoadventures.uk
Hi Steve!
It could be a cache issue. I have checked the page and now the checkbox are displaying fine on my end. If the issue persists at your end, clear the browser cache or disable browser extensions and check again.