Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 26, 2023 at 6:45 pm #1395442
    Monika

    Hey there,

    i found the acticle “How to change the standard Bullet Points to a custom .PNG image?”
    and it worked.
    But: Die Icon is above the Text.
    It should be next to the Text.
    my code:

    `
    .avia_textblock.bullets li:before {
    content: url(https://cdn0.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/16/bullet-red.png);
    }
    .avia_textblock.bullets ul {
    list-style: none;
    }

    .entry-content-wrapper li {
    margin-left: 1.5em !important;
    }

    January 26, 2023 at 7:03 pm #1395444
    Guenni007

    on my end your code looks good to me – but you can shift those icons by postitioning them:

    .avia_textblock.bullets li::before {
  content: url(https://cdn0.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/16/bullet-red.png);
  position: relative;
  top: 5px;
}
    January 26, 2023 at 7:12 pm #1395445
    Monika

    Thasnk you! That works

    January 26, 2023 at 7:20 pm #1395446
    Monika

    and how can i change the Size of my custom icon?
    Its too big now.

    thank you!

    January 27, 2023 at 6:47 am #1395519
    Nikko

    Hi Monika,

    You’ll need to change the size of the image using image editors (like photoshop or use online image editors).

    If you don’t want to use resize it using an image editor then an option with be to use this code instead:

    .avia_textblock.bullets li {
    position: relative;
    padding-left: 20px;
}

.avia_textblock.bullets li:before {
    content: '';
    background: url(https://wery-designstudio.de/wp-content/uploads/2023/01/haken-webdesigner-wordpress-freelancer.png) center;
    background-size: contain;
    display: block;
    width: 12px;
    height: 15px;
    position: absolute;
    left: 0;
    top: 8px;
}

    Best regards,
    Nikko

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.