theming bullets

User24

Anyway to theme the bullets using css? i used inspect element and got nothing ( ended with ::marker {
) 😅

edev

User24 What exactly you want to change? symbol for bullet, color?

Justoverclock

u mean like this?

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists#using_a_custom_bullet_image

User24

Justoverclock will .ul li { help me customize the bullets?

EDIT: like

.ul li {
color: #ffffff;
}

edev

User24 This will make bullet text that color too.

User24

edev ah yeah, say i just need to change the color of the bullet alone? i wish to get something like

.li {
    position: relative;
    font-family: FontAwesome;
    font-size: 14px;
    content: "\f10c";
    color: #1de9b6;
    margin: 0 .75rem 0 0;
}

EDIT: With a font awesome icon of course and lil CSS tweaks

edev

User24

Maybe this could work (if in .post-body bullets needed)

.Post-body ul {
list-style: none;
}

.Post-body ul li::before {
font-family: FontAwesome;
font-size: 14px;
content: "\f10c";
color: #1de9b6;
margin: 0 .75rem 0 0;
display: inline-block;
width: 1em;
margin-left: -1em;
}

User24

edev thanks, it works but fontawesome icons aren't loading

Justoverclock

User24

change font family line with this:

font-family: "Font Awesome 5 Free";

edev

User24 Is that icon circle-o? If so, just change it to

font-family: "Font Awesome 5 Free";
content: "\f111";;

User24

Justoverclock i just now figured it out and tried. no use.

User24

edev exactly 😀

User24

and i gone through the fontawesome CSS file manually and found that \f10c was not there and used f111

edev

User24 I think it is because that's Font Awsome 4 icon, but font family is for Font Awsome 5. :

User24

Thank you @edev and @Justoverclock 💝