Use Custom Icons for Styled Buttons

The RadSocialShare offers several ways to change the default icons that the Styled Buttons have. You can see it live in this online demo and here follows a short explanation with some simpler examples:

• Via the CustomIconUrl property for each button. Note that it requires a 16 x 16px icon by default. You can change these dimensions by using the CustomIconWidth and CustomIconHeight properties of the button and thus each button may have different size, for example:

  ASP.NET

  <telerik:RadSocialButton SocialNetType="MailTo" CustomIconUrl="custom-mailto-icon-32px.png" CustomIconHeight="32px" CustomIconWidth="32px" />
  

• Via the CssClass property of the RadSocialShare you can override the default sizes and then set the imagevia the CustomIconUrl property:

  CSS

  .RadSocialShare.myClass
  {
      background-image: url(myBackgroundImage.png);
      border: 0;
      background-color: transparent;
  }
  
  .RadSocialShare.myClass .sshCustomIcon
  {
      width: 24px !important;
      height: 24px !important;
  }
  

  ASP.NET

  <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare1" runat="server" CssClass="myClass">
      <MainButons>
          <telerik:RadSocialButton SocialNetType="MailTo" CustomIconUrl="custom-mailto-icon-24px.png" />
      </MainButons>
  </telerik:RadSocialShare>
  

• By using image sprites which contain all the icons and overriding the specific classes for each button to have the background position from your sprite:

  CSS

  span.sshCustomSpriteMailTo,
  span.sshCustomSpriteCompactButton
  {
      background-image: url(myCustomSprite.png);
      background-repeat: no-repeat;
      width: 32px;
      height: 32px;
  }
  
  a.sshLinkItem .sshCustomSpriteMailTo,
  a.sshLinkItem:hover .sshCustomSpriteMailTo
  {
      background-position: 0 0;
  }
  
  a.sshLinkItem .sshCustomSpriteCompactButton,
  a.sshLinkItem:hover .sshCustomSpriteCompactButton
  {
      background-position: -40px 0;
  }
  

  ASP.NET

  <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare1" runat="server">
      <MainButons>
          <telerik:RadSocialButton SocialNetType="MailTo" CssClass="sshCustomSpriteMailTo" />
          <telerik:RadCompactButton CssClass="sshCustomSpriteCompactButton" />
      </MainButons>
  </telerik:RadSocialShare>
  

See Also

• Custom icons online demo

• CSS Image Sprites