Hello,
I have added the following code li { list-style-image: url(/wp-content/uploads/2012/02/rock10px.png); } to the custom css to call a different image for list items instead of the usual bullet.
The problem is that when I add the code it adds these little bullets (=my new image) to the menu items and social icons as well.
Is there a way to get rid of them so that the new icon is displayed only on
when used on a page or post?
Please help! Many, many thanks in advance.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
