With some dialogs, depending on the nature of the application and the content of the dialog itself, it may be beneficial to place an icon beside the dialog title. This could be beneficial in the sense that it provides additional context to the user. For example, an edit dialog might have a pencil icon, whereas a user profile dialog might contain a person icon.
To illustrate adding an icon to the title bar of the dialog widget, we'll use the following as our basic HTML:
<div id="dialog" title="Edit"> <div> <label>Field 1:</label> <input type="text"/> </div> <div> <label>Field 2:</label> <input type="text"/> </div> </div>
The first thing we'll need to define is a custom CSS class used to ...