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

Use Custom Icons for Styled Buttons

Updated over 1 year ago

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>

Use Custom Icons for Styled Buttons

See Also