jquery.ui dialog button with a icon

Question

I am looking to have a button from a jquery.ui with a icon.

My preferance is fontawsone, but I suppose bootstrap ones are ok.

So, say this markup:

        <asp:Button ID="cmdTest" runat="server" Text="Test Dialog"
            CssClass="btn"
            OnClientClick="testdialog();return false;" />


        <div id="fundialog" style="display:none">
            <h3>This is a test dialog</h3>
            <i class="fa fa-check-circle" aria-hidden="true"></i> Ok icon wanted
            <br />
            <i class="fa fa-times-circle" aria-hidden="true"></i> Cancel icon wanted
        </div>
        <br />
        testing:<br />
         <h4><i class="fa fa-car" aria-hidden="true"></i> Fa Car icon</h4>

    <script>

        function testdialog() {

            var myDialog = $("#fundialog")
            myDialog.dialog({
                autoOpen: false,
                modal: true,
                closeText: "",
                title: "My title Text",
                appendTo: "form",
                buttons: [
                    {
                        id: "MyOkBtn",
                        text: 'Ok',
                        class:'MyOkBtn',
                        click: function () {
                            myDialog.dialog('close')
                            myDialog.dialog('destroy');
                            btn.click()
                        }
                    },
                    {
                        id: "MyCancel",
                        text: "Cancel",
                        click: function () {
                            myDialog.dialog('close')
                            myDialog.dialog('destroy');
                        }
                    }
                ]
            })
            myDialog.dialog('open')

        }
    </script>

And the result is this:

However, as noted, I want a button with a icon.

I have attempted this:

                buttons: [
                    {
                        id: "MyOkBtn",
                        text: '<i class="fa fa-check-circle" aria-hidden="true"></i>Ok',
                        click: function () {
                            myDialog.dialog('close')
                            myDialog.dialog('destroy');
                            btn.click()
                        }
                    },

but, result is this:

So, looking for a button, but a button with a icon from font awsome.

I suppose I am open to downloading a svg from boostrap ions, or even the fontawsome, and using a background image for the button.

So it does not look like jquery.ui buttons support any kind of button icon or image (other then some very old ugly ones that look like they came from windows 3.1 era).

While I am using asp.net here (web forms), it basic markup, jquery, jquery.ui.

I'm also open to modifying the jquery.ui css files, but they are quite long, and doing so would prevent future upgrades with any much ease.

There is also the looming issue of hover highlights, and the image color not changing, but hey, one step at a time!

Possible Duplicate: stackoverflow.com/questions/18102159/… — Twisty, Commented Mar 27, 2023 at 19:02
Actually, that answer is for a icon in the title bar - not the built in jquery.ui buttons (often ok, cancel), but can be any text you want. So, a useful link/post - but it does not address changing or adding icons to the dialog buttons. — Albert D. Kallal, Commented Mar 27, 2023 at 20:31

Twisty · Accepted Answer · 2023-03-27 19:30:55Z

Consider using the built in UI Icons:

$(function() {
  var myDialog = $("#fundialog").dialog({
    autoOpen: false,
    modal: true,
    title: "My title Text",
    buttons: [{
        id: "MyOkBtn",
        text: 'Ok',
        icon: "ui-icon-circle-check",
        class: 'MyOkBtn',
        click: function() {
          myDialog.dialog('close')
          myDialog.dialog('destroy');
          btn.click()
        }
      },
      {
        id: "MyCancel",
        text: "Cancel",
        icon: "ui-icon-circle-close",
        click: function() {
          myDialog.dialog('close')
          myDialog.dialog('destroy');
        }
      }
    ]
  });

  $(".btn").click(function() {
    myDialog.dialog("open");
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<button class="btn">Test Dialog</button>


<div id="fundialog">
  <h3>This is a test dialog</h3>
  <i class="fa fa-check-circle" aria-hidden="true"></i> Ok icon wanted
  <br />
  <i class="fa fa-times-circle" aria-hidden="true"></i> Cancel icon wanted
</div>
<br /> testing:
<br />
<h4><i class="fa fa-car" aria-hidden="true"></i> Fa Car icon</h4>

You can use ID or Classes to make use of your own Icons too.

$(function() {
  var myDialog = $("#fundialog").dialog({
    autoOpen: false,
    modal: true,
    title: "My title Text",
    buttons: [{
        id: "MyOkBtn",
        text: 'Ok',
        class: "ui-state-default",
        click: function() {
          myDialog.dialog('close').dialog('destroy');
          btn.click();
        }
      },
      {
        id: "MyCancelBtn",
        text: "Cancel",
        click: function() {
          myDialog.dialog('close').dialog('destroy');
        }
      }
    ],
    create: function(e, ui) {
      $("<i>", {
        class: "fa fa-check-circle"
      }).prependTo("#MyOkBtn");
      $("<i>", {
        class: "fa fa-times-circle"
      }).prependTo("#MyCancelBtn");
    }
  });

  $(".btn").click(function() {
    myDialog.dialog("open");
  });
});

.ui-dialog .ui-dialog-buttonset i {
  margin-right: 3px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<button class="btn">Test Dialog</button>


<div id="fundialog">
  <h3>This is a test dialog</h3>
  <i class="fa fa-check-circle" aria-hidden="true"></i> Ok icon wanted
  <br />
  <i class="fa fa-times-circle" aria-hidden="true"></i> Cancel icon wanted
</div>
<br /> testing:
<br />
<h4><i class="fa fa-car" aria-hidden="true"></i> Fa Car icon</h4>

This method makes use of the create callback to modify the buttons and add the FontAwesome Icons.

That is quite near dam impressive. As the other poster suggested, I could use the built-in jquery.ui icons (but, they are just too poor, and they often don't "inverse" correctly when you have a dark color, and hover to a light color (and the text inverts its color). This is quite impressive, and I did not know/see/realize that the jquery.ui dialog has that create event. I still perhaps want to move to a bit left the icon, but this is stellar work on your part - it just is! - thank you kindly for sharing this. — Albert D. Kallal, Commented Mar 27, 2023 at 19:42
And the built in icons? They do a "fantastic" job of position in the exact position, but they don't look all that great, and getting hover highlights to work been a issue. (so, I have tested and considered the built in icons - but the icon list is limited, and adding to that "one" big image is "a challenge". But, use of the create event? Gee, that rather workable. — Albert D. Kallal, Commented Mar 27, 2023 at 19:44

Problem Child · Accepted Answer · 2023-03-27 04:52:02Z

0

I'm hoping you have a css file and you are using FontAwesome 6. Would be better to add the unicode form of the FA Icon via css like so,

.test-btn::before {
  content: '\f058';
  font-family: "Font Awesome 6 free";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
<button class="test-btn">
  Hello
</button>

answered Mar 27, 2023 at 4:52

Problem Child

5851 gold badge8 silver badges18 bronze badges

Thanks for your input. I could add the class, but the jquery.ui is what creates the button, and thus I would need a new class for each dialog, and I would rather just have a "setting" per dialog. (to be fair, I failed to explain that in my post). The other post that allows use of create event of the jquery.ui dialog was what I looking for. So, as much my fault for not being "more" clear I was looking to do this setting in the jquery.ui dialog as opposed to having to drop in a style + class each time I do this. However, I appreciate your suggestion, since in "most" cases, your suggest is good.
– Albert D. Kallal
Commented Mar 27, 2023 at 23:33

Add a comment |

Collectives™ on Stack Overflow

jquery.ui dialog button with a icon

2 Answers 2

Not the answer you're looking for? Browse other questions tagged
jquery
asp.net
jquery-ui
jquery-ui-dialog
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Not the answer you're looking for? Browse other questions tagged jqueryasp.netjquery-uijquery-ui-dialog or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
jquery
asp.net
jquery-ui
jquery-ui-dialog
or ask your own question.