/* This will make sure the list items don't have bullets */

#connect ul {
list-style-type:none;
}


/* Set the width and height of this to the images */

#connect ul li a {
display: block;
height:20px; /* Change this */
width:10px; /* Change this */
background-repeat:no-repeat;
margin: 1px 1px 1px 1px; /* optional to create spacing */
/*order: top, right, bottom, left */
}


/* This will hide the default text */

#connect ul li a span {
display:none;
}


/* Set the non-hover image here: */

#connect li#addFriend a {
background:url(http://path/to/addFriend/image.gif);
}

/* Set the hover image here: */

#connect li#addFriend a:hover {
background:url(http://path/to/addFriend/hover/image.gif);
}

/* Repeat for the rest of the connect items */

#connect li#addComment a {
background:url(http://path/to/addComment/image.gif);
}
#connect li#addComment a:hover {
background:url(http://path/to/addComment/hover/image.gif);
}

#connect li#sendMessage a {
background:url(http://path/to/sendMessage/image.gif);
}
#connect li#sendMessage a:hover {
background:url(http://path/to/sendMessage/hover/image.gif);
}

#connect li#inviteGroup a {
background:url(http://path/to/inviteGroup/image.gif);
}
#connect li#inviteGroup a:hover {
background:url(http://path/to/inviteGroup/hover/image.gif);
}