リストアイテムのテキストが背景イメージの先頭から始まるようにするにはどうすればよいですか？

Question

リストアイテムのテキストをバックグラウンドイメージの先頭から開始しないようにするには、いくつかの助けが必要です。ここに私のコードは次のとおりです。ここで

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'); 
} 

は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> 

これは私のページにどのように機能するかについては、https://botanical-art.baeecorp.org/about-us/#more-12

の「BAEEのソーシャルメディアの接続」を参照してくださいコードをベースに@Ori Droriから質問に「How do I keep a background image bullet aligned with the first line of a wrapped list item?」

Answer 1

これを行うには、左にあるパディング値をに増やしてください要素。しかし、これは特異性の問題です。サイトの別の要素.site-main ul liがパディング値を取得し、.site-main ul liが.followより具体的であるため、パディング値が.followの値を上書きしているためです。

.followセレクタを具体的には.follow-background .followに更新することができます。

問題を解決しない場合、または私の説明が明確でない場合は、私に知らせてください。ありがとう！