Add margin around image in list - html

Question

I have been able to show an image in a list with a gradient here :
http://stackoverflow.com/questions/23747548/css-list-not-working-if-in-hex/23749271#23749271
I now need to add a margin around the image. I can't seem to find the CSS to do this.
MrWarby
Code from the default.css file that controls the list: (it is a bigcommerce site)
.SubCategoryList li a,.topNav .CategoryList li a,.homeNav #SideCategoryList li a, .MenuList li a{
/* background: #6daad3; Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-moz-linear-gradient(top, #6daad3 0%, #396b9e 100%); /* FF3.6+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#6daad3), color-stop(100%,#396b9e)); /* Chrome,Safari4+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-linear-gradient(top, #6daad3 0%,#396b9e 100%); /* Chrome10+,Safari5.1+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-o-linear-gradient(top, #6daad3 0%,#396b9e 100%); /* Opera 11.10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-ms-linear-gradient(top, #6daad3 0%,#396b9e 100%); /* IE10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,linear-gradient(to bottom, #6daad3 0%,#396b9e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6daad3', endColorstr='#396b9e',GradientType=0 ); /* IE6-8 */
background-size: 80px 80px;
/* background-image:url('http://static.dezeen.com/uploads/2013/03/dezeen_Sergio-concept-car-by-Pininfarina_ss_4.jpg'); */
}
.SubCategoryList li,.topNav .CategoryList li,.homeNav #SideCategoryList li, .MenuList li{
position:relative
}
.SubCategoryList li a:before,.topNav .CategoryList li a:before,.homeNav #SideCategoryList li a:before, .MenuList li a:before {
font-family:'FontAwesome-webfont';
font-weight:normal;
font-style:normal;
content:"\f054";
position:absolute;
top:50%;
right:10px;
z-index:1;
font-size:14px;
color:#ccc;
margin:-8px 10px 0 0
}
existing list
!(https://www.dropbox.com/s/bbu4xkc2h0m26fl/Screen%20Shot%202014-05-20%20at%2014.52.42.png)
required look
!(https://www.dropbox.com/s/9vbr2ap26wbdgfo/Screen%20Shot%202014-05-20%20at%2014.52.27.png)

Answer 1

Try this code:
img {
margin-left: 20px;
}