[Loren NParticipant]

Hi,
I have a number of lists here;
http://startingconversations.co.uk/start-learning/

I want to change the bullet icon to a tick on this page only. I found a post here;

Bullet Point Colour and Icon

and have been trying to replicate it but it doesn’t seem to work.

I’d also like to control which icon I get for different levels of bullet.

Can you help?

[JoaoModerator]

Hi There,

Have you considered using the Icon list element in Cornerstone?

Let us know your thoughts,

Thanks

[Loren NParticipant]

Yes, I had considered it but I can’t do 2nd or 3rd level bullets with that. Or can I?

[RupokMember]

Hi there,

Yes that would be tough to create nested list with Icon List. So you can use icon shortcode just before the text like this within Text Element:

<ul>
  <li>[x_icon type="check"] Your List Item</li>
  <li>[x_icon type="check"] Your List Item</li>
  <li>[x_icon type="check"] Your List Item</li>
  <li>
      <ul>
        <li>[x_icon type="check"] Your List Item</li>
        <li>[x_icon type="check"] Your List Item</li>
        <li>[x_icon type="check"] Your List Item</li>
        <li>[x_icon type="check"] Your List Item</li>
      </ul>
</li>
</ul>

Hope this helps.

[Loren NParticipant]

The only problem with that is that it keeps the existing round bullet. It doesn’t replace it. I now have 2 icons.

[ThaiModerator]

Hi There,

Please add the following CSS:

.page-id-193 ul {
    list-style: none;
}

Then try this HTML code instead:

<ul>
  <li>[x_icon type="check"] Your List Item</li>
  <li>[x_icon type="check"] Your List Item</li>
  <li>[x_icon type="check"] Your List Item</li>
  <li>
      <ul>
        <li>[x_icon type="check"] Your List Item</li>
        <li>[x_icon type="check"] Your List Item</li>
        <li>[x_icon type="check"] Your List Item</li>
        <li>[x_icon type="check"] Your List Item</li>
      </ul>
</li>
</ul>

Hope it helps 🙂

[Loren NParticipant]

Yay! That worked. Thanks.

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts