Embedded Icons
Built-in Icons
RadNotification provides two icons in its UI to help convey the message - the TitleIcon and ContentIcon. The list with the possible values for the embedded icons is as follows:
- info
- delete
- deny
- edit
- ok
- warning
- none
The icons are an <img />
element in the Classic RenderMode and font-icons in the Lightweight RenderMode.
The built-in icons are rendered only when the
Text
property is used to render content in the notification. If you use itsContentTemplate
, the built-in icons are not rendered and you may want to emulate them with your own image control or other HTML structure.
The built-in icons work only when the embedded skins are used. If you externalize the skins or use a custom skin, you cannot set them via the above shorthand values. If you wish to use them in this case please examine the Using the built-in icons with a custom skin Knowledge Base article on the matter.
Using a Custom Image
You can point the ContentIcon and TitleIcon properties to a URL with your own image as shown in Example 1. You can use an absolute or a relative URL, and an ASP root-relative path (e.g., ~/images/my-custom-image.png
).
In this case, the TitleIcon's size is 16 by 16 pixels and the ContentIcon's size is 32 by 32 pixels. With the Classic RenderMode, you will get <img />
tags, while the Lightweight mode uses a span
element with the background-image
CSS property.
Example 1: Setting the URL to a custom image to a RadNotification
<telerik:RadNotification ID="RadNotification1" runat="server" TitleIcon="~/images/icon_16x16.png" ContentIcon="~/images/icon_32x32.png">
</telerik:RadNotification>
Using Custom Font Icons
The Lightweight RenderMode uses font-icons for the embedded icons and lets you use font-icons for your custom icons.
If you do not provide an URL to an image, the string value will be treated as a CSS class that will be applied to the <span>
element that creates the icon. Examples 2-5 show how you can override the built-in CSS so you can use your custom icons.
Example 2: Changing the font-icon from the Telerik built-in font.
div.RadNotification .myFontIconCssClass:before
{
content: "\E043";
}
<telerik:RadNotification ID="RadNotification2" runat="server" VisibleOnPageLoad="true" Position="Center" Width="200" Height="200" RenderMode="Lightweight" AutoCloseDelay="0"
ContentIcon="myFontIconCssClass" >
</telerik:RadNotification>
Example 3: Using a custom font for a RadNotification's icon. Note that the fa fa-camera-retro
class is provided by the font author and contains the needed rules to create a font-icon with the appropriate symbol. What you need to do is to ensure that the .rnIcon:before
element has the desired font applied (See Example 5).
div.RadNotification .fa.fa-camera-retro.rnIcon:before
{
font-family: "FontAwesome";
}
<telerik:RadNotification ID="RadNotification1" runat="server" VisibleOnPageLoad="true" Position="Center" Width="200" Height="200" RenderMode="Lightweight" AutoCloseDelay="0"
TitleIcon="fa fa-camera-retro"></telerik:RadNotification>
Example 4: A sample declaration for including FontAwesome CSS on the page so you can run Example 3.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Example 5: Using a custom font with your own CSS rules for selecting the content.
div.RadNotification .myFontIconCssClass:before
{
font-family: "myCustomFontIconFont";
content: "\E043"; /* Apply your desired content according to your own font */
}
<telerik:RadNotification ID="RadNotification2" runat="server" VisibleOnPageLoad="true" Position="Center" Width="200" Height="200" RenderMode="Lightweight" AutoCloseDelay="0"
ContentIcon="myFontIconCssClass" >
</telerik:RadNotification>