将 Bootstrap Glyphicon 添加到 jQuery UI 对话框按钮答案

【问题标题】：Adding Bootstrap Glyphicon to jQuery UI Dialog Buttons将 Bootstrap Glyphicon 添加到 jQuery UI 对话框按钮
【发布时间】：2016-05-31 10:22:42
【问题描述】：

我已经看了很长时间，但似乎找不到任何关于如何做到这一点的好文档。

我可以像这样添加类：

$('#element').dialog({
  buttons:{
    "yes":{
      text:'Yes',
      class:'test'
    },
    "no":{
      text:'No',
    }
});

这不允许我添加跨度标签。

我试过了：

.test:before {
    content:"\e105";
}

但这只是在文本顶部添加了一个小块：

我也尝试过注入跨度，我真的不想这样做，因为它感觉非常“hacky”。

$('.ui-dialog-buttonpane')
.find('button:contains("Yes")')
.removeClass('ui-button-text-only')
.prepend('<span class="glyphicon glyphicon-export"></span>')

这给了我：

有没有更好的方法来做到这一点？

【问题讨论】：

标签： jquery twitter-bootstrap jquery-ui glyphicons

【解决方案1】：

小人似乎是：

.ui-icon {
  display: block;
  text-indent: -99999px; /* THIS GUY HERE! */
  overflow: hidden;
  background-repeat: no-repeat;
}

但你不想完全摆脱他，因为它可能会影响 jQuery UI 小部件中的图标。

所以你可以只为我们应用glyphicon类的元素覆盖它，比如：

.ui-icon.glyphicon {
  text-indent: initial;
}

现在，要应用这些 glyphicon 类，请使用 jQuery 按钮小部件的 icons 选项，例如：

$(function () {
  $("#dialog").dialog({
     buttons: [{
        text: "Ok",
        icons: {
            primary: "glyphicon glyphicon-export"
        },
        click: function () {
            $(this).dialog("close");
        }
    }]
  });
});

这给了我：

【讨论】：

这在 IE11 上不起作用，firefox 和 chrome 都可以。即使使用 !important，仍会应用文本缩进。
@SeanThorburn 这是一个 IE 特定问题，您可能想问一个不同的问题，询问为什么 !important 在 IE11 中不起作用...

【解决方案2】：

你还需要添加

.test { 
    font-family: 'Glyphicons Halflings'; 
}

【讨论】：

关于将图标放在同一行而不是上面的任何建议？

【解决方案3】：

可以给按钮提供一个ID，通过css添加glyphicon

   "yes":{
          id:'idYes',
          text:'Yes',
          class:'test'
        },
        "no":{
          id: 'idNo',
          text:'No',
        }

用于添加的 CSS

#idYes:before{
  color:green;
  content:"\e170";
}

对于另一个按钮也是如此。图标代码可以参考Bootstrap glyphicon cheatsheet

【讨论】：