Using different ICONs for Bullet lists

sujai_chand · June 2016

Hi,

I wanted to use ICONS such Megaphone, Tools, Chart-Graph etc (from the give ICON set) for bulletin list rather than using Star, Check and Idea icons as you shown in few demo pages.

I tried using " Megaphone, Tools, Chart-Graph" these ICON instead of star and check icons but its not accepting/reflecting in the output.

Say for example, in the below code, I replaced <ul class="list_CHECK"> with < ul class="list-MEGAPHONE>. I tried in the "MIxed List" as well but its not working. can't I use different icons for the bulletin lists.

<li>Suspendisse a pellentesque dui, non felis.</li>

<li>Quisque lorem tortor fringilla sed.</li>

<li>Quisque cursus et, porttitor risus.</li>

<li>Nulla ipsum dolor lacus, suscipit adipiscing.</li>

</ul>

For your reference: http://demo.oddcounts.com/c84/index.php/home/cube-demo/

Appreciate your suggestion.

Albert · June 2016

Hi,

you can not use icons for lists. The "checkbox" you saw on our demo are images, not icons so if you want to change them, you need to replace current image on FTP with your own. Or you can replace current image with the new one.

sujai_chand · June 2016

oh! is it? Thanks for your info. Let me try out that..

BTW, In FTP, under which folder I can find the images of Checkbox, Idea, Star and all. Any idea?

Albert · June 2016

http://demo.oddcounts.com/c84/wp-content/themes/betheme/images/icons/list_check.png - this is the full path to the list check image.

sujai_chand · June 2016

Thank you very much!

Albert · June 2016

You are welcome!

Salesurance · August 2020

Dear Support,

4 years later it is possible to set an icon instead of a bullet list. BUT when I tried it your way, it didn't work.

In my theme at the footer section there was your code like:

<li> <a href="#">Quent per co</a></li>

<li> <a href="#">Nceptos hime</a></li>

<li> <a href="#">Mauris in erat</a></li>

<li> <a href="#">Lustoac</a></li>

</ul>

I tried this code on a regular page but there suddenly appear the bullet points again.

So there is the bullet point - the triangle - text

=( Why does this happen?

Thanks a lot for help!!

Salesurance · August 2020

I got a solution:

NO bullet points forced:

give your list a unique class too!

ul.liste3 {

list-style: none!important;

margin-left: 0px!important;

padding-left: 1em!important;

text-indent: -1em!important;

}

If a bullet point is very long and over 2 rows-->

[class^="icon-"]:before, [class*=" icon-"]:before {

margin-right: -0.2em!important;}

Pablo · August 2020

Salesurance,

Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.

It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

Salesurance · August 2020

Dear Support,

sure..sorry. Here the page I am working on:

https://mycitybike.com/index.php/e-bike-kaufen/hannah/

Here the Footer with this code:

<li> <a href="#">Quent per co</a></li>

https://ibb.co/HN7gVLd

And here the same code within a page element:

https://ibb.co/T0qZMtr

Pablo · August 2020

To add other icon as a bullet list, you shouldn't add the inside the <li> - you should apply the class of an icon in the <li> element.

Please see the documentation and examples here:

https://themes.muffingroup.com/be/theme/shortcodes/typography/#lists

thanks

Zapa · September 2020

Is it possible to have access to the css where icon bullet list is styled? Maybe we could clone it and add customized lists on custom css section. Is that possible? At least while you figure out a way to do it with a module or shortcode.

Pablo · September 2020

Zapa,

Well, we do not provide help with the theme files customizations, but if you want to change something in CSS code, you surely should go to the functions -> builder -> assets, in the theme files, there you will find the CSS codes for items in builder.

Remember, that if you want to change something in the theme files, you should use the child theme.

https://developer.wordpress.org/themes/advanced-topics/child-themes/

thanks

Using different ICONs for Bullet lists

Comments