Edit this page

Use FontAwesome Icons in Kendo UI Grid

The example below demonstrates how to use FontAwesome icons with the Kendo UI Grid's built-in buttons.

Example
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>

    <div id="example" class="k-content">
        <div id="grid"></div>
        <div id="details"></div>
    <script>
        var wnd,
            detailsTemplate;

        $(function () {
          var grid = $("#grid").kendoGrid({
            dataSource: {
              pageSize: 20,
              data: createRandomData(50)
            },
            sortable: true,
            columnMenu: true,
            filterable: true,
            pageable: true,
            height: 430,
            columns: [
              { field: "FirstName", title: "First Name", width: "140px" },
              { field: "LastName", title: "Last Name", width: "140px" },
              { field: "Title" },
              { command: {
                text: " View Details",
                click: showDetails,
                iconClass: "fa fa-map-marker"
              },
               title: " ",
               width: "140px"
              }]
          }).data("kendoGrid");

          wnd = $("#details")
          .kendoWindow({
            title: "Customer Details",
            modal: true,
            visible: false,
            resizable: false,
            width: 300
          }).data("kendoWindow");

          detailsTemplate = kendo.template($("#template").html());
        });

        function showDetails(e) {
          e.preventDefault();

          var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
          wnd.content(detailsTemplate(dataItem));
          wnd.center().open();
        }
      </script>
      <script type="text/x-kendo-template" id="template">
            <div id="details-container">
                <h2>#= FirstName # #= LastName #</h2>
                <em>#= Title #</em>
                <dl>
                    <dt>City: #= City #</dt>
                    <dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
                </dl>
            </div>
      </script>
      <style>
      .k-header-column-menu .k-icon,
      .k-column-menu .k-icon,
      .k-column-menu .k-sprite,
      .k-grid-pager .k-icon,
      .k-grid .k-pager-numbers .k-current-page .k-pager-nav:after {
        background-image: none;
        font-size: 1em;
        font-family: FontAwesome;
      }

      .k-header-column-menu .k-icon:before,
      .k-header-column-menu .k-sprite:before,
      .k-column-menu .k-icon:before,
      .k-column-menu .k-sprite:before,
      .k-grid-pager .k-icon:before {
        display: inline-block;
        padding-top: 0.5em;
        color: #2e2e2e;
        width: 16px;
        height: 20px;
      }

      .k-column-menu .k-i-arrow-60-right:before {
        content: "\f061";
      }
       .k-header-column-menu .k-i-more-vertical:before{
        content: "\f063";
      }

      .k-column-menu .k-i-filter:before {
        content: "\f0b0";
      }

      .k-column-menu .k-i-arrow-60-down:before {
        content: "\f063";
      }  

      .k-column-menu .k-i-columns:before {
        content: "\f0db";
      }

      .k-column-menu .k-i-sort-asc-sm:before {
        content: "\f0dd";
      }

      .k-column-menu .k-i-sort-desc-sm:before {
        content: "\f0de";
      }

      .k-grid-pager .k-i-arrow-e:before {
        content: "\f061";
      }

      .k-grid-pager .k-i-seek-e:before {
        content: "\f0da";
      }

      .k-grid-pager .k-i-seek-w:before {
        content: "\f0d9";
      }

      .k-grid-pager .k-i-arrow-w:before {
        content: "\f060";
      }

      .k-grid-pager .k-pager-numbers .k-current-page .k-pager-nav:after {
        content: "\f047";
      }
    </style>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

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

Give article feedback

Tell us how we can improve this article

close
Dummy