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

Custom Icons

Custom Sprite and CSS Classes
Images and Properties Configuration
Images and CSS Setup

The RadSocialShare allows easy customization of the built-in, styled RadSocialButtons (the standard buttons as Like, Send, GooglePlusOne, etc have their own appearance generated through the corresponding third party scripts).

This demo shows different approaches on how to use custom styling through properties, sprite, separate images, CSS, etc, depending on the exact scenario, goal and preferences.

  • The first RadSocialShare instance uses a sprite for the images and the width, height, background image and position are all set through the RadSocialButton CssClass property.
  • The second RadSocialShare instance uses separate icons and every button has its CustomIconWidth, CustomIconHeight and CustomIconUrl properties configured. The buttons in this case can have different size set.
  • The third RadSocialShare instance uses separate icons and the width and height for all buttons is set through CSS. The icon for every button is set through the CustomIconUrl property.
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#"  %>

<%@ 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" />
    <link href="images/sshCircleCustomIcons.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-containers">
        <div class="demo-container size-thin">
            <strong>Custom Sprite and CSS Classes</strong>
            <telerik:RadSocialShare RenderMode="Lightweight" Skin="Silk" ID="RadSocialShare3" runat="server" Width="240">
                <MainButtons>
                    <telerik:RadSocialButton SocialNetType="ShareOnFacebook" CssClass="sshCustomCircleFB"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnTwitter" CssClass="sshCustomCircleTwitter"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="LinkedIn" CssClass="sshCustomCircleLinkdedIn"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Blogger" CssClass="sshCustomCircleBlogger"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="StumbleUpon" CssClass="sshCustomCircleStumble"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="MySpace" CssClass="sshCustomCircleMySpace"></telerik:RadSocialButton>
                </MainButtons>
            </telerik:RadSocialShare>
        </div>
        <div class="demo-container size-thin">
            <strong>Images and Properties Configuration</strong>
            <telerik:RadSocialShare RenderMode="Lightweight" Skin="Silk" ID="RadSocialShare1" runat="server" CssClass="TransWrapper" Width="220">
                <MainButtons>
                    <telerik:RadSocialButton SocialNetType="ShareOnFacebook" CustomIconWidth="32" CustomIconHeight="32"
                        CustomIconUrl="images/Trans/FaceBook.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnTwitter" CustomIconWidth="32" CustomIconHeight="32"
                        CustomIconUrl="images/Trans/Twitter.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="LinkedIn" CustomIconWidth="32" CustomIconHeight="32"
                        CustomIconUrl="images/Trans/LinkedIn.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Blogger" CustomIconWidth="32" CustomIconHeight="32"
                        CustomIconUrl="images/Trans/Blogger.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="StumbleUpon" CustomIconWidth="32" CustomIconHeight="32"
                        CustomIconUrl="images/Trans/Stumble.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="MySpace" CustomIconWidth="32" CustomIconHeight="32"
                        CustomIconUrl="images/Trans/MySpace.png"></telerik:RadSocialButton>
                </MainButtons>
            </telerik:RadSocialShare>
        </div>
        <div class="demo-container size-thin">
            <strong>Images and CSS Setup</strong>
            <telerik:RadSocialShare RenderMode="Lightweight" Skin="Silk" ID="RadSocialShare2" runat="server" CssClass="WoodWrapper" Width="170">
                <MainButtons>
                    <telerik:RadSocialButton SocialNetType="ShareOnFacebook" CustomIconUrl="images/Wood/FaceBook.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnTwitter" CustomIconUrl="images/Wood/Twitter.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="LinkedIn" CustomIconUrl="images/Wood/LinkedIn.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Blogger" CustomIconUrl="images/Wood/Blogger.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="StumbleUpon" CustomIconUrl="images/Wood/Stumble.png"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="MySpace" CustomIconUrl="images/Wood/MySpace.png"></telerik:RadSocialButton>
                </MainButtons>
            </telerik:RadSocialShare>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance