Edit this page

Font Glyphs Overview

With the new Office2016 theme we introduced a new approach to add icons and icon-like images. We are providing font "glyphs" via the TelerikWebUI font. The glyphs are vector symbols that can be used as information-carrying icons or interaction indicators.

This article explains the specifics of this approach, demonstrates usage with examples and provides a reference sheet for the available glyphs.

You can find a list with all available glyphs in the reference sheet.

The TelerikWebUI font provides over 400 individual glyphs. We have chosen this approach to define the icons in the Office2016 because it provides a number of advantages and benefits.

  • The glyphs are vector paths which are easily scalable without loss of quality.

  • There is a wide range of different beautiful built-in glyphs to choose from.

  • They are easily colored – since they are text shapes. It is achieved by setting a Foreground color, which allows their usage in scenarios where the background of the control changes between light and dark color in different interaction states – e.g. buttons.

  • They are all contained in the small font file and available for use with the inclusion of the Telerik.Windows.Controls assembly and merging the needed resource dictionary for easier referencing.

  • They are available for use in any of our themes, when the needed resources are included. They are not specific for the Office2016.

The recommended size for the TelerikWebUI glyphs is 16 or any multiple of it (e.g. 32, 48, 64 etc.) since they are designed for 16px height. However, they are vector paths and, like any font, would look clean, distinguishable, non-pixelated and beautiful in almost any size, which is their advantage to raster images and icons.

The available glyphs are separated in several groups, based on their usage:

  • Navigation and Layout
  • Action
  • Media
  • Toggle
  • Alert and Notification
  • Image
  • Editor
  • Map
  • Social
  • File

Using glyphs

The glyphs are basically text shapes, so they need to be hosted in a control with a text contents. Recommended for this is a TextBlock as it has no special styling.

Example 1: Using glyphs

<TextBlock FontFamily=”{StaticResource TelerikWebUI}” 
           FontSize=”16” 
           Text=”{StaticResource GlyphHeart}” 
           FontWeight=”Normal” 
           Foreground=”{telerik:Office2016Resource ResourceKey=IconBrush}”/>

The content of the text-hosting element is set in a string with format &#xe[3-digit number];

Since this string carries no meaning for the glyph it relates to, we are providing a dictionary with key-value pairs for all available glyphs. This enables the usage of more meaningful references for the needed glyphs.

Example 2: Setting a glyph

<!-- Glyph string -->
<TextBlock Text="&#xe101;" /> 

<!-- Meaningful reference name -->
<TextBlock Text="{StaticResource GlyphRedo}" /> 

Furthermore that allows inclusions to the TelerikWebUI font as it is extended occasionally, sometimes shifting the numbers of some of the existing glyphs. The resource dictionary is updated and shipped with the font in the assembly with every change, without a need for changes in the already existing projects.

In order to use the glyph references and the font as StaticResources in a project, you need to include the Telerik.Windows.Controls.dll and merge the required dictionary in the application resources.

Example 3: Adding the ResourceDictionary with the fonts

<ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/FontResources.xaml"/> 

In the UI for WPF controls the needed resources are provided, so this inclusion is required only in case you would like to use the font and the glyphs in your custom project.

Changing the glyphs’ color is achieved by changing the foreground of the holding element, in the same manner as the foreground of a regular font. This is extremely useful in scenarios when the background of the control changes in different interaction states (see Example 4).

Example 4: Setting glyph foreground

<telerik:RadToggleButton HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10">
    <TextBlock Text="{StaticResource GlyphLock}" 
               FontFamily="{StaticResource TelerikWebUI}" 
               FontSize="16" 
               Foreground="{Binding RelativeSource={RelativeSource AncestorType=ContentPresenter}, 
               Path=(TextElement.Foreground)}" />
</telerik:RadToggleButton>

Figure 1: Updated glyph foreground based on the interaction state of the control - normal, mouse over and pressed

Example 5 demonstrates how to change the glyph based on a RadToggleButton being checked or unchecked.

Example 5: Dynamic glyph change

<telerik:RadToggleButton HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" >
    <TextBlock FontFamily="{StaticResource TelerikWebUI}" FontSize="16"
           Foreground="{Binding RelativeSource={RelativeSource AncestorType=ContentPresenter}, Path=(TextElement.Foreground)}" />
    <telerik:RadToggleButton.Resources>
        <Style TargetType="TextBlock">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type telerik:RadToggleButton}}, Path=IsChecked}" Value="True">
                    <Setter Property="Text" Value="{StaticResource GlyphUnlock}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type telerik:RadToggleButton}}, Path=IsChecked}" Value="False">
                    <Setter Property="Text" Value="{StaticResource GlyphLock}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </telerik:RadToggleButton.Resources>
</telerik:RadToggleButton>

Figure 2: Dynamic change of the glyph icon when RadToggleButton is toggled

See Also