New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom Icons

RadLinkButton provides an easy way to place an icon on your button by setting the Icon-Url property to the path of the icon image.

To specify custom icons for the button's hover effect, use the HoveredUrl. And for the pressed state use PressedUrl.

For precise icon positioning, use the Icon-Top, Icon-Right, Icon-Bottom and Icon-Left properties.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin" style="text-align: center;">
        <p>
            <telerik:RadLinkButton ID="RadLinkButton1" runat="server" Text="Find" NavigateUrl="http://www.telerik.com/" Target="_blank">
                <Icon Url="images/eFind.png" Top="7px" />
            </telerik:RadLinkButton>
        </p>
        <p>
            <telerik:RadLinkButton ID="RadLinkButton2" runat="server" Text="Close" NavigateUrl="http://www.telerik.com/" Target="_blank">
                <Icon Url="images/eClose.png" Top="7px" />
            </telerik:RadLinkButton>
        </p>
        <p>
            <telerik:RadLinkButton ID="RadLinkButton3" runat="server" Text="Flash" NavigateUrl="http://www.telerik.com/" Target="_blank">
                <Icon Url="images/eFlash.png" Top="7px"/>
            </telerik:RadLinkButton>
        </p>
        <p>
            <telerik:RadLinkButton ID="RadLinkButton4" runat="server" Text="Html" NavigateUrl="http://www.telerik.com/" Target="_blank">
                <Icon Url="images/eHtml.png" Top="7px"/>
            </telerik:RadLinkButton>
        </p>
        <p>
            <telerik:RadLinkButton ID="RadLinkButton5" runat="server" Text="Player" NavigateUrl="http://www.telerik.com/" Target="_blank">
                <Icon Url="images/ePlayer.png" Top="7px"/>
            </telerik:RadLinkButton>
        </p>
        <p>
            <telerik:RadLinkButton ID="RadLinkButton6" runat="server" Text="Rate" NavigateUrl="http://www.telerik.com/" Target="_blank">
                <Icon Url="images/eRate.png" Top="7px" />
            </telerik:RadLinkButton>
        </p>
        <p>
            <telerik:RadLinkButton ID="RadLinkButton7" runat="server" Text="SpellCheck" NavigateUrl="http://www.telerik.com/" Target="_blank">
                <Icon Url="images/eSpellCheck.png" Top="7px"/>
            </telerik:RadLinkButton>
        </p>
        <p>
            <telerik:RadLinkButton ID="RadLinkButton8" runat="server" Text="Time" NavigateUrl="http://www.telerik.com/" Target="_blank">
                <Icon Url="images/eTime.png" Top="7px"/>
            </telerik:RadLinkButton>
        </p>
        <p>
            <telerik:RadLinkButton ID="RadLinkButton9" runat="server" Text="Tools" NavigateUrl="http://www.telerik.com/" Target="_blank">
                <Icon Url="images/eTools.png" Top="7px" />
            </telerik:RadLinkButton>
        </p>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance