Edit this page

Add Icon to Confirm Titlebar

Environment

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

Description

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

Solution

Using CSS, you can add an icon to a predefined dialog such as the Kendo UI Confirm component.

  .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 contains the CSS implementation to append FontAwesome icons to a Kendo UI Confirm.

    <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

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

Give article feedback

Tell us how we can improve this article

close
Dummy