Edit this page

Using FontAwesome in RadDiagram Visual Templates

In this how-to article you can see how to integrate the FontAwesome icons in Visual Templates in RadDiagram.

Figure 1: Result after integrating FontAwesome icons from the code in Example 1.

The example below follows the scenario from the Shapes Template. Basically, to have the FontAwesome icons you should:

  1. Include the FontAwesome style.
  2. Use a TextBlock element in the desired shape's visual.
  3. Modify it with the needed char code by setting it to the text property: text: String.fromCharCode(0xf005).
  4. Set the fontFamily property to "FontAwesome": fontFamily: "FontAwesome".

Example 1: Integrating FontAwesome icons in Visual Templates.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">

<script type="text/javascript">
    var visualTemplate = function (options) {
        var diagram = kendo.dataviz.diagram;

        var group = new diagram.Group({
            autoSize: true

        var circle = new diagram.Circle({
            width: 100,
            height: 100,
            fill: "#32CD32"

        var textBlock1 = new diagram.TextBlock({
            text: String.fromCharCode(0xf005),
            fontFamily: "FontAwesome",
            color: "#ffffff",
            x: 28,
            y: 32


        var textBlock2 = new diagram.TextBlock({
            text: options.id,
            color: "#ffffff",
            fontSize: 16,
            x: 28,
            y: 50

        return group;

<telerik:RadDiagram ID="diagram1" runat="server">
    <ShapeDefaultsSettings Visual="visualTemplate"></ShapeDefaultsSettings>
        <telerik:DiagramShape Id="Shape1" X="100" Y="110">
        <telerik:DiagramShape Id="Shape2" X="230" Y="240">
        <telerik:DiagramShape Id="Shape3" X="360" Y="40">
        <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
            <FromSettings ShapeId="Shape1" Connector="Right" />
            <ToSettings ShapeId="Shape2" Connector="Top" />
        <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
            <FromSettings ShapeId="Shape1" Connector="Right" />
            <ToSettings ShapeId="Shape3" Connector="Left" />

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article