LinkButton - Custom Icons

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?