[Jacob DParticipant]

I’ve been attempting to replace all the bullets on my site with Font Awesome icons and through some suggestions here in the forums I’ve gotten pretty close, but not quite there. The code I’ve added to my child theme’s CSS is as follows:

.x-text  ul li:before {
    content: "\f101";
    padding-right: 5px;
    color:#007ca9;
    font-family: 'fontAwesome';
}

This is placing the chosen icons in the right place, BUT, it’s leaving the default bullet in place, so now I’ve essentially got two bullets. You can see any example on this page, both at top right and bottom of the page: http://cerulean.pmcgdev.com/services/arctic-cryotherapy/whole-body-arctic-cryotherapy/

[Rue NelModerator]

Hello There,

Thanks for writing in! It seems that your code is working in displaying the icon. You just forgotten to remove the default bullet. Please update your code and use this instead:

.x-text  ul li {
  list-style: none;
}

.x-text  ul li:before {
    content: "\f101";
    padding-right: 5px;
    color:#007ca9;
    font-family: 'fontAwesome';
}

We would loved to know if this has work for you. Thank you.

[Jacob DParticipant]

Perfect, that fixed that problem, though that leads to a related follow up question – how do I adjust the second line alignment for list items that wrap? It appears that the wrapping is still lining up to the old, no longer visible bullets.

[RupokMember]

Hi there,

Let’s update the code a bit :

.x-text ul li {
  list-style: outside none none;
  position: relative;
}

.x-text ul li::before {
  color: #007ca9;
  content: "\f101";
  font-family: "FontAwesome";
  left: -15px;
  position: absolute;
}

Hope this helps.

[Jacob DParticipant]

That did the trick – thank you so much for the help!

[RupokMember]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Jacob DParticipant]

I have another question on this topic – is it possible to make the secondary (indented) bullets a different icon and/or color?

[Nabeel AModerator]

Hi again,

Can you please let us know on which page you’re using indented bullets so we can take a look?

Thanks!

[Jacob DParticipant]

Sure, here’s a page with a TON of them 🙂

http://cerulean.pmcgdev.com/services/athletic-cellular-level-conditioning-performance-preparation/dynamic-hypobaric-conditioning-therapy/

The goal is just to create some differentiation between the main bullet and the sub-bullets.

[ChristopherModerator]

Hi there,

Please add this code :

.x-text ul ul li::before {
    color: red;
    content: "\f101";
    font-family: "FontAwesome";
    left: -15px;
    position: absolute;
}

Hope it helps.

[Jacob DParticipant]

Thank you, that was spot on!

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts