Add Icon to a Confirm Box Titlebar

Environment

Product	Progress® Kendo UI® Dialog for jQuery
Product Version	2018.2.516

Description

How can I add a FontAwesome icon to the title bar of a Kendo UI Confirm box?

Solution

Add an icon to a predefined dialog, such as the Kendo UI Confirm box, by using CSS.

  .k-confirm .k-window-titlebar::before {
    content: '\f059';
    font-family: "FontAwesome";
    font-weight: bold;
    font-size: 14px;
  }
  .k-confirm .k-window-titlebar::after {
    font-family: "FontAwesome";
    content: "\f059";
    font-weight: bold;
    font-size: 24px;
    float: right;
  }
  .k-confirm .k-window-titlebar .k-dialog-title {
    visibility: collapse;
  }

The following example contains the CSS implementation for appending FontAwesome icons to a Kendo UI Confirm box.

    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    <style>
      /*Icon to the left side of the titlebar */
      .k-confirm .k-window-titlebar::before {
        content: '\f059  Please Confirm ';
        font-family: "FontAwesome";
        font-weight: bold;
        font-size: 14px;
      }
      /*Icon to the right side of the titlebar */
      .k-confirm .k-window-titlebar::after {
        font-family: "FontAwesome";
        content: "\f059";
        font-weight: bold;
        font-size: 24px;
        float: right;
      }
      .k-confirm .k-window-titlebar .k-dialog-title {
        visibility: collapse;
      }
    </style>

    <div id="example">
      <button id="confirmBtn" class="k-button">kendo.confirm</button>

      <script>
        $("#confirmBtn").on("click", function () {
          kendo.confirm("Are you sure that you want to proceed?").then(function () {
            console.log("You have chosen Okay");
          }, function () {
            console.log("You have chosen Cancel");
          });
        });
      </script>
    </div>

See Also

• Kendo UI Dialog - Predefined Dialogs Demo