Bulletpoint symbols

[zero_to_one]

Hey there, I’d like to add this symbol which comes with the theme http://prntscr.com/n7srvl
as my bulletpoints
Thanks for our help!

[jade]

Hi @zerotoone.de,

Please try this code in the Global CSS and make sure to change the image URL in the code to the URL of the image you want to use as the bullet point:

.entry-content ul {
  margin: 0;
  list-style: none;
}

.entry-content ul li {
    background: transparent url(http://chittagongit.com//images/check-icon-small/check-icon-small-0.jpg) 0 2px no-repeat;
    background-size: 21px 21px;
    padding-left: 30px;
}

Hope this helps.

[zero_to_one]

the icon is part of the classic icon element, is it possible to get it prom there or simply add a shortcode to the desired place in my text?
thank you

[jade]

Hi @zerotoone.de,

This should do it:

.entry-content ul {
    margin-left: 0;
    list-style: none;
}

.entry-content ul li {
    position: relative;
    padding-left: 25px;
}

.entry-content ul li:before {
    content: '\f058';
    font-family: "FontAwesomeLight";
    font-weight: 300;
    color: red;
    position: absolute;
    left: 0;
}

Hope this helps.

[zero_to_one]

@Jade

.entry-content ul {
margin-left: 0;
list-style: none;
}

.entry-content ul li {
position: relative;
padding-left: 25px;
}

.entry-content ul li:before {
content: ‘\f058’;
font-family: “FontAwesomeLight”;
font-weight: 300;
color: red;
position: absolute;
left: 0;
}

Thank you works great, but how can I resize the icon now?

[jade]

Hi @zerotoone.de,

You can still use/add font-size: 20px to .entry-content ul li:before.

Hope this helps.

[zero_to_one]

@Jade

font-size: 20px

Thank you, how can I shift the icons up vertically?

[jade]

Hi @zerotoone.de,

You can use top: 5px; to ul li:before.

https://www.w3schools.com/css/css_positioning.asp

Hope this helps.

[zero_to_one]

@Jade

top: 5px;

THank you, you are fast

[ruenel]

You’re welcome!
We’re glad @Jade were able to help you out.