That is not going to work. In your example, each anchor element has an image for the text portion of the link. If you wanted to control the images via CSS, it would have to be done in a manner such as this..for example..
However, if you want to save some bandwidth so that multiple images do not have to be downloaded, you may want to use CSS Sprites. Just do a Search for "CSS Sprites". The use of sprites allows you to have one image file that has all of your pics in one image and you use CSS to show only portions of the image to each element. The idea behind a sprite is that you conserve quite a bit of bandwidth and time when your web visitor downloads one file rather than multiple files from the web server.
thanks JorgeM. I have used sprites before, the reason why I haven't used them this time is because the number of social media icons I will use is not definitive as yet, so I don't want to create multiple versions of the sprite. Besides, it might not be easy to assign a link to each single imgage of the sprite off the top of my head.
When I asked about the css, perhaps naively, I thought there was a way to do the all thing just using css, so that if I had to increment the number of socil media icons I had to update only the css and not the html. In my current solution, which is t the toop of the thread, I have a div and then the images and links associated with them. This works fine, the only trouble with it is that if I want to add another icon, I have to update both css and html. I like your first solution, I really didn't think about that, but the problem still stands, in that, if I am to add another icon I still need to update both css and html.
I think I will leave it as it is then, but thanks for posting your code, it is useful