Change Global Ul List Icon

This topic has 8 replies, 2 voices, and was last updated 4 years, 7 months ago by Aizaz Imtiaz Awan.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
May 18, 2020 at 10:08 am #195860

Jean-Michel
Participant

Good day. I would like to change my list icon on all pages. I know there is a CSS code to change the global at the moment I have al characters:> But you can also embed a hack from FA. What is the CSS code?

Many thanks for your help.

May 18, 2020 at 10:41 am #195873

Aizaz Imtiaz Awan
Keymaster

Hello,

I have visited the URL you provided. If we apply the ul li style for all the lists on the website then it will also affect the navigation links as well. So please provide with some relevant screenshots of the specific area to check it myself and help you out accordingly.

Best Regards.

May 18, 2020 at 11:16 am #195888

Jean-Michel
Participant

I would like to change the product short description and product description. Give me the codes, then I can install the FA myself with the unicode

May 18, 2020 at 11:37 am #195895
Aizaz Imtiaz Awan
Keymaster
Hello,

I have visited your website to change the icon you need to add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.single-product .woocommerce-product-details__short-description > ul > li::before {
content: "\f008";
font-family: " ";
}
```
You can change the content and font family accordingly.

Best Regards.
May 18, 2020 at 11:48 am #195898

Jean-Michel
Participant

Ok thanks and how can I make the cin a little bigger?

May 18, 2020 at 11:58 am #195901

Jean-Michel
Participant

The icon is not visible on mobile sites

May 18, 2020 at 12:19 pm #195906
Aizaz Imtiaz Awan
Keymaster
Hello,

You are Most Welcome.

To change the Font Size of the icon. Please replace the previous code with the following in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.single-product .woocommerce-product-details__short-description > ul > li::before {
content: "";
font-family: "";
font-size: 20px;
}
```
2) Please make sure that you added the Code correctly in the Global Custom CSS area then clear cache and check back.

Best Regards.
May 18, 2020 at 1:21 pm #195917

Jean-Michel
Participant

But it looks wrong. See, it’s postponed. The list icon is now too far down. What am I doing wrong?
https://jamb-xxl.ch/shop/spielzeuge-spiele/spielzeug-fuer-draussen/trampolin-zubehoer/vidaxl-2-stufige-trampolinleiter-stahl-silbern-1026-cm/

This is my code:

.single-product .woocommerce-product-details__short-description > ul > li::before {
content: “\f00c”;
font-family: “FontAwesome”;
font-size: 15px;
}

May 19, 2020 at 5:02 am #196012

Aizaz Imtiaz Awan
Keymaster

Hello,

I visited the URL you provided and the li icons are working absolutely fine on my end. Please clear cache and check back.

Screenshot for Clarification: https://ibb.co/FHRbJ0r

If you are trying to ask anything else then provide with the screenshot of the specific area to check it myself and help you out accordingly.

Best Regards.
Author

Posts