LinkButton Image

I am not a CSS expert, but the following technique can be used to easily apply an image next to virtually any link. 

First you need to define your CSS class which sets the background to a referenced image. 

.icon-cancel {
    background: url(../images/icons/cancel.gif) no-repeat left top;
    display:inline;
    padding-left:18px;
    margin-left: 10px;
    padding-right:10px;
}

Once defined, assign the class to your hyperlink.

<a href="#" class="icon-cancel">Cancel</a>

You may need to play with padding and margin, but you will end up with something similar to the following result:

I used this technique to pretty up a very plain GridView display by applying classes to my edit, update and cancel linkbuttons today.  All it took was the creation of a few more CSS classes and linkbutton class tag updates. 

<asp:TemplateField ShowHeader="False">
    <EditItemTemplate>
        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True"
            CommandName="Update" class="icon-save" Text="Update"></asp:LinkButton>
        <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
            CommandName="Cancel" class="icon-cancel" Text="Cancel"></asp:LinkButton>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
            CommandName="Edit" class="icon-edit" Text="Edit"></asp:LinkButton>
    </ItemTemplate>
</asp:TemplateField>