Skip to main content
P
pchartier
Participating Frequently
June 17, 2023
Answered

Custom list image not showing up

  • June 17, 2023
  • 1 reply
  • 881 views

I want to have custom bullets on ONE set of bulleted items, but my bullet image isn’t showing up. Thanks for any help!

This is my CSS code:

.fleurdelisbullets{

 margin-left: 1rem;

font-size: 18px;

color: #838175;

list-style-position: outside;

list-style-image: url(../images/fleurDeLis18pt.png);

padding-left: 2rem;

}

 

.fleurdelisbullets li {

padding-left: 2rem;

background-size: 0;

}

 

This is the source code:

 

 <div class="fleurdelisbullets">

   <ul>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum</li>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum</li>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum.</li>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum</li>

   </ul>

</div>

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Thank you, Nancy. That happens to be what I was trying to figure out right now, and it wasn't going well!

     


    Bootstrap 4 Reference:

    https://www.w3schools.com/bootstrap4/

    https://getbootstrap.com/docs/4.6/getting-started/introduction/

     

    <div class="container">
    <div class="row">
    <div class="col-md-6">
    <h3>Column 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-md-6">
    <h3>Column 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    </div>
    <div class="row">
    <div class="col-md-6">
    <h3>Column 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-md-6">
    <h3>Column 4</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    </div>
    </div>

     

    1 reply

    B
    Ben M
    Community Expert
    June 17, 2023

    Can we see the page online to verify the image and path are correct?

    P
    pchartierAuthor
    Participating Frequently
    June 17, 2023

    Here you go: http://www.paulitachartier.com/NHCC_2023/

    I know, I know, this is a work in progress, and there are several kinks I need to work out. BUT, the culprit is towards the bottom of the page, entitled “What Can You Expect?” Those blank spaces are supposed to be bullets.

    B
    Ben M
    Community Expert
    June 17, 2023

    Thank you for sharing. On line 177 of your style.css file you have a conflicting piece of code that is causing it not to show. Because this is setting the ul, li general list style to none, it is overriding your image. As soon as that is cleared your custom image shows.

     


    ul,li{
    list-style:none;
    padding:0px;
    margin:0px;
    }

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices