Jump to content

Change the bullet icon of the sub-level

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.xystema.com/pricing

I changed the bullet icon of my list to checkmark with the following code.

section[data-section-id="6177d1eb3dfe9850e25d20a6"] {ul[data-rte-list] li>*:first-child::before {
    content: "\2713";
    font-weight: 400;
    font-size: 15px;
    top: 8px;
    color: green;
  }
}

Now, I want the sub-level encircled in red below to be in different bullet icon like ">". Can someone help me with this? Many thanks.

My website password is 061298.

211199360_ScreenShot2021-11-07at6_35_26PM.png.bd346c59d1ad300ddb8b610f255fe3b7.png

Screen Shot 2021-11-07 at 6.32.43 PM.png

Link to comment
  • Solution
8 hours ago, Ciodensky said:

Hi @tuanphan, I already put back the sub-level bullet lists on the Mender package.

https://www.xystema.com/pricing

password: 061298

Use this CSS

ul[data-rte-list] li ul li p:before {
    content: "\e006" !important;
    font-family: 'squarespace-ui-font';
    transform: rotate(90deg);
}

image.thumb.png.a36aad259866f2f8e1ef535b8e00a647.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/9/2021 at 9:01 PM, tuanphan said:

Use this CSS

ul[data-rte-list] li ul li p:before {
    content: "\e006" !important;
    font-family: 'squarespace-ui-font';
    transform: rotate(90deg);
}

image.thumb.png.a36aad259866f2f8e1ef535b8e00a647.png

Hi @tuanphan, Perfect! Thank you so much! You're always my lifesaver.

I just want to know where you get the bullet icon, I would like to change it. I have a source (toptal.com) but the bullet icon I want is not there, if you mind?

Link to comment
On 11/12/2021 at 9:48 AM, Ciodensky said:

Hi @tuanphan, Perfect! Thank you so much! You're always my lifesaver.

I just want to know where you get the bullet icon, I would like to change it. I have a source (toptal.com) but the bullet icon I want is not there, if you mind?

I used Squarespace Font Icons. You can see list here (some of icons, still trying to fetch all icons)

https://tuanphan.squarespace.com/ss-ui-fonts?noredirect

Pass: abc

You can also try FontAwesome Icons, Google Icons,...

Can you send the image of bullet icon what you want? 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
22 hours ago, tuanphan said:

I used Squarespace Font Icons. You can see list here (some of icons, still trying to fetch all icons)

https://tuanphan.squarespace.com/ss-ui-fonts?noredirect

Pass: abc

You can also try FontAwesome Icons, Google Icons,...

Can you send the image of bullet icon what you want? 

I looking actually of outlined circle but I am okay already with what I got. Thanks for sharing the site and I greatly appreciate your response.

Screen Shot 2021-11-15 at 11.01.42 AM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.