Home › Forums › WoodMart support forum › How to insert a number before an icon?
How to insert a number before an icon?
- This topic has 15 replies, 3 voices, and was last updated 3 years, 4 months ago by Bogdan Donovan.
-
AuthorPosts
-
August 1, 2021 at 10:18 pm #310013
vascolisboaParticipantHi,
In my page I insert a list with icon and text, but I want to insert a number before the icon. How can I do that?
Attachments:
You must be logged in to view attached files.August 2, 2021 at 7:12 am #310048
Aizaz Imtiaz AwanKeymasterHello,
I saw the screenshot you attached.
Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS and see if this works for you.
.wd-list { list-style: decimal; }
Regards.
Xtemos StudiosAugust 2, 2021 at 2:30 pm #310168
vascolisboaParticipantHi,
Didn’t work.
Can you please help?
August 3, 2021 at 6:01 am #310249
Aizaz Imtiaz AwanKeymasterHello,
It seems that there are some syntax errors in the Custom CSS areas in your website that’s why the CSS is not working.
Please make sure that there are no syntax errors in the Custom CSS you added before.
Then clear cache and check back.
If it still doesn’t work then provide the admin panel login details of the website.
Regards.
Xtemos Studios.August 3, 2021 at 8:27 am #310282
vascolisboaParticipantHi,
Couldn’t find the issue about CSS syntax.
Can you please help? There are the admin panel login details of the website.
August 3, 2021 at 8:29 am #310283
vascolisboaParticipantI removed all the CSS codes added to test and didn’t work.
Please I need a solution ASAP.
Thanks
August 3, 2021 at 10:48 am #310315
Aizaz Imtiaz AwanKeymasterHello,
Sorry but the login details you provided are not working.
Please provide the correct admin panel login details to let me assist you further.
Regards.
Xtemos StudiosAugust 3, 2021 at 10:58 am #310325
vascolisboaParticipantIt is the wordpress login. It’s not working?
August 3, 2021 at 12:40 pm #310373
Aizaz Imtiaz AwanKeymasterHello,
Yes, the login details you provided for wordpress are not working.
Please provide the correct details to let me assist you further.
Regards.
Xtemos StudiosAugust 3, 2021 at 1:41 pm #310391
vascolisboaParticipantThere’s new ones.
Thanks
August 4, 2021 at 7:44 am #310525
Aizaz Imtiaz AwanKeymasterHello,
I have logged into your website.
Sorry but it is not possible to display the both icon and number while using the woodmart list element.
If you want to display an ordered list then you can set the list to ordered list.
Screenshot for Clarification: https://gyazo.com/d907bca308c2eb7041a1b833b55a8ddd
Regards.
Xtemos StudiosAugust 4, 2021 at 9:37 am #310552
vascolisboaParticipantHi,
I want to change it then, but when I do only appears 1. in every list item. How can I change for different numbers?
Thanks
Attachments:
You must be logged in to view attached files.August 4, 2021 at 11:51 am #310594
Aizaz Imtiaz AwanKeymasterHello,
They are not changing numbers because you added the list in separate elements.
You need to edit the list and add items to it then the number will change.
Screenshot for Clarification: https://gyazo.com/b4706e87552868aa837d3a9018732e3f
Regards.
Xtemos StudiosAugust 6, 2021 at 7:38 am #310958
vascolisboaParticipantHi,
Sorry, but must have a code to do that. Because that solution is not worth it.
Can you please talk with the developers team to help me using css for example to fix?
I just want to have the exact same design but with all numbers orderly correct. Like the attach.
Thanks
Attachments:
You must be logged in to view attached files.August 6, 2021 at 7:40 am #310961
vascolisboaParticipantwd-list-type-ordered .list-icon:before {
content: counter(item) “.”;
counter-increment: item;
}maybe here, I don’t know
August 6, 2021 at 9:35 am #311063
Bogdan DonovanKeymasterHello,
If your general idea is to add counter along with icon in Woodmart List element (like shown on screenshot https://prnt.sc/1jsq8o2) it can be done with custom CSS code, but this method has own limitations:
– You can’t use an Ordered list item in the customized list element because the counter already was reset outside list item icon.
– List with count need to be created using only one element. You can’t end a counter in one element and continue in another.Here is instruction hot to create ordered list with icons:
1. Add the following custom code to the General Custom CSS area in Theme Settings.
.wd-list.custom-list { counter-reset: item; } .wd-list.custom-list li:before { content: counter(item) "."; counter-increment: item; margin-right: 5px; font-weight: 600; color: #333; }
2. Add
custom-list
class to the Extra class name field in List element settings (https://prnt.sc/1jsslu9) to apply custom counter to the desired list.Kind Regards
-
AuthorPosts
- You must be logged in to create new topics. Login / Register