Combine Image Using CSS Sprite

Hi All~

I already tried many options I’ve found, but I think still failed on the last one.
If I have this several image, below:

<li class=’sprites-social-widget’>
<a href=’https://twitter.com/miss_komik‘ target=’_blank’><img alt=’Twitter’ src=’https://4.bp.blogspot.com/-JMnfLP6cB9I/VvX1QHBGlII/AAAAAAAAAm8/dS32Jt0kjro/s000/twitter.png‘ title=’Twitter’/></a>
<a href=’https://www.facebook.com/misskomik‘ target=’_blank’><img alt=’Facebook’ src=’https://2.bp.blogspot.com/-3opvr5v9ZTo/VvX1QQxzo4I/AAAAAAAAAnA/w9ndAHTSLWI/s000/facebook.png‘ title=’Facebook’/></a>
<a href=’https://plus.google.com/u/0/118324346419013150961‘ target=’_blank’><img alt=’Google+’ src=’https://1.bp.blogspot.com/-kxyXT06xQJo/VvX1Qsau-eI/AAAAAAAAAnE/3jKzJk1Mcok/s000/gplus.png‘ title=’Google+’/></a><a expr:href=’data:blog.homepageUrl + &quot;feeds/posts/default&quot;’ target=’_blank’><img alt=’RSS Feed’ src=’https://2.bp.blogspot.com/-0WntE7OOtHg/VvX1RHJgcnI/AAAAAAAAAnM/gY420o7mc20/s000/rss.png‘ title=’RSS Feed’/></a>
<a href=’https://misskomiklesprivat.blogspot.com/2018/08/about-misskomik.html‘ target=’_blank’><img alt=’Email’ src=’https://2.bp.blogspot.com/-RqqMeZLnQ_k/VvX1RenPBYI/AAAAAAAAAnQ/Qz9a-_KQD_c/s000/email.png‘ title=’Contact’/></a>
</li></ul>

And below the CSS:

#sprites-social-widget li a {
background-position: center;
background-repeat: no-repeat;
display: block;
height: 32pxpx;
}

#sprites-social-widget li a.Twitter {background-image:url(‘https://4.bp.blogspot.com/-JMnfLP6cB9I/VvX1QHBGlII/AAAAAAAAAm8/dS32Jt0kjro/s000/twitter.png‘)}
#sprites-social-widget li a:hover.Twitter {background-image:url(‘https://lh3.googleusercontent.com/-Lk8QkwndjFM/W52PFNdXfTI/AAAAAAAABFk/yvh0BtQKXPAopzd4LCYrP7cGJeu3tCENwCEwYBhgL/w140-h140-p/twitter3.jpg‘)}

#sprites-social-widget li a.Facebook {background-image:url(‘https://www.facebook.com/misskomik‘ target=’_blank’><img alt=’Facebook’ src=’https://2.bp.blogspot.com/-3opvr5v9ZTo/VvX1QQxzo4I/AAAAAAAAAnA/w9ndAHTSLWI/s000/facebook.png‘)}
#sprites-social-widget li a:hover.Facebook {background-image:url(‘https://lh3.googleusercontent.com/-UUz4WZTBDbA/W52PEBv1O6I/AAAAAAAABFc/DAc5GkdReqkj2pJZ-khdQVYdelLnJT7LQCEwYBhgL/w140-h140-p/facebook2.jpg‘)}

#sprites-social-widget li a.Google+ {background-image:url(‘https://1.bp.blogspot.com/-kxyXT06xQJo/VvX1Qsau-eI/AAAAAAAAAnE/3jKzJk1Mcok/s000/gplus.png‘)}
#sprites-social-widget li a:hover.Google+ {background-image:url(‘https://lh3.googleusercontent.com/-QLDyUQcAXGg/W52PECHZ3LI/AAAAAAAABFY/JlJMiQWNXBAZ4szT0q6hMWnUi7B51mERwCEwYBhgL/w140-h140-p/gplus2.jpg‘)}

#sprites-social-widget li a.RSS Feed {background-image:url(‘https://2.bp.blogspot.com/-0WntE7OOtHg/VvX1RHJgcnI/AAAAAAAAAnM/gY420o7mc20/s000/rss.png‘)}
#sprites-social-widget li a:hover.RSS Feed {background-image:url(‘https://lh3.googleusercontent.com/-L3bOVnCfl-4/W52PFJ49j1I/AAAAAAAABFg/ys7Qp5GHYOYu0AlOaW0BsMrVnLtIP7I3gCEwYBhgL/w140-h140-p/rss2.jpg‘)}

#sprites-social-widget li a.email {background-image:url(‘https://2.bp.blogspot.com/-RqqMeZLnQ_k/VvX1RenPBYI/AAAAAAAAAnQ/Qz9a-_KQD_c/s000/email.png‘)}
#sprites-social-widget li a:hover.kontak {background-image:url(‘https://lh3.googleusercontent.com/-m8dmI4HTVlY/W52PEPug0aI/AAAAAAAABFU/WynaEpF-sW8caOaCCbOf546rUcyrUg6QQCEwYBhgL/w140-h140-p/email2.png‘)}
<ul id=”sprites-social-widget”>

Can anyone explain or rewrite which part that I need to edit?
Really appreciate for anyone could help. Thanks!

Also in #HTML _↴