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>