使 .ui-btn-left 变大答案

【问题标题】：Making .ui-btn-left larger使 .ui-btn-left 变大
【发布时间】：2014-05-16 13:44:48
【问题描述】：

我还没有在网上找到确切答案的快速问题。我对 Javascript 很陌生，所以这可能是一个非常简单的问题。我正在尝试使 jQuery 页面上的关闭按钮更大。

.ui-dialog .ui-header .ui-btn-left {
    left: auto;
    right: 5px;
}

我知道如果我指定高度和宽度，这会使按钮变大，但我最好如何增加图标的大小以匹配或至少使其居中在按钮上？

【问题讨论】：

到目前为止你尝试过什么？ “...增加图标的大小以匹配或至少使其以按钮为中心？”.. 没有任何 HTML，我们应该如何知道？
同意；您的 HTML 可能会对解决您想要的结果的方式产生很大的影响。另外，您使用的是 jQuery UI 吗？还是仅自定义 CSS？你有额外的自定义 CSS 文件吗？
你能给个小提琴什么的吗？这取决于图标是什么？是图像吗？字体？
我正在使用 JQuery mobile 1.3.2 并且 .ui-btn-left 似乎使用的是默认图标/样式。这是我刚刚加入的一个大型项目的一部分，因此我正在尝试创建一个 JSFiddle 来显示我的问题，但划分相关代码并非易事。

标签： jquery html css jquery-mobile mobile

【解决方案1】：

我最终解决了我自己的问题。我不得不删除默认的关闭按钮并创建自己的。这可能会帮助其他试图做同样事情的人。 data-close-btn 关闭默认关闭按钮。

数据图标只是告诉它使用自定义图标，它比我制作的更直接。

#btnCancel .ui-btn-inner {
    width: 33px;
    height: 35px;
    margin: 0px;
    border: none !important;
    background: transparent !important;
}

.ui-icon-custom 
{
   background-image: url(../images/image.png) !important;
   background-position: 0px -84px;
   width: 33px;
   height: 35px;
   margin: 0 !important;
   box-shadow:none;
} 

<html>
   <head>
    <title>Change Language</title>   
   </head>

   <body>

     <div data-role="page" id="changeLanguage" data-close-btn="none">
       <header data-role="header">
           <h1 data-translation-key="choose language" ></h1>
           <a id="btnCancel" class="ui-btn-left" data-icon="custom" data-rel="back" data-    iconpos="notext" ></a>
       </header>

       <div data-role="content">
         <p data-translation-key="pick language"></p>       
         <ul id="languageSelection"></ul>
       </div>

       <p class="version"></p>
     </div>
   </body>
</html>

【讨论】：