Comment conserver le texte de l'élément de liste commençant au-dessus de la puce de l'image d'arrière-plan?

Question

J'ai besoin d'aide pour comprendre comment faire en sorte que le texte de l'élément de liste ne commence pas au-dessus de la puce de l'image d'arrière-plan. Voici mon code:

ul.follow-background { 
    list-style: none outside; 
    margin: 0 0 0 0.6em; 
    padding: 0 0 0 0.6em; 
} 

.follow { 
    list-style: none outside !important; 
    line-height: 30px; 
    background: no-repeat left 7px; /** fixed vertical position **/ 
    margin: 0.3em 0 0 -0.6em; 
    padding: 0 0 0 1.7em; 
    overflow: hidden; 
} 

.follow.blacksquareicon { 
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/black-square-16x16.png'); 
} 

.follow.facebookicon { 
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/facebook-icon-16x16.png') 
} 

.follow.flickricon { 
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/fluid-flickr-logo-16x16.png'); 
} 

.follow.linkedinicon { 
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/in.jpg'); 
} 

.follow.pinteresticon { 
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/pinterest-logo-16x16.png'); 
} 

.follow.rssicon { 
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/rss.png'); 
} 

.follow.twittericon { 
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/twitter.gif'); 
} 

Voici le code HTML:

<ul class="follow-background"> 
    <li class="follow facebookicon"><a href="https://www.facebook.com/baeeorg" rel="nofollow">Facebook</a></li> 
    <li class="follow flickricon"><a href="https://www.flickr.com/photos/baee/" rel="nofollow">Flickr Photo Albums</a></li> 
    <li class="follow pinteresticon"><a href="https://www.pinterest.com/baee0196/" rel="nofollow">Pinterest</a></li> 
    <li class="follow twittericon"><a href="https://twitter.com/BaeeArtists" rel="nofollow">Twitter</a></li> 
    <li class="follow blacksquareicon"><a href="https://botanical-art.baeecorp.org/news/" rel="nofollow">News Announcements (subscribe to get our latest posts)</a></li> 
</ul> 

Pour comment cela fonctionne sur ma page, voir la section "Les connexions médias sociaux BAEE" sur https://botanical-art.baeecorp.org/about-us/#more-12

Le code est basé sur la réponse de @Ori Drori à ma question "How do I keep a background image bullet aligned with the first line of a wrapped list item?"

Answer 1

Pour ce faire, vous avez eu raison d'augmenter la valeur de remplissage-gauche sur .follow éléments. Cependant, ceci est une question de spécificité - parce qu'un autre élément sur le site, .site-main ul li obtient une valeur de remplissage, et .site-main ul li est plus spécifique que .follow, la valeur de remplissage remplace votre valeur pour .follow. Pour contourner ce problème, vous pouvez mettre à jour le sélecteur .follow afin qu'il soit plus spécifique, c'est-à-dire .follow-background .follow.

Faites un essai et faites-moi savoir si cela ne résout pas votre problème, ou si mon explication n'est pas claire. Merci!