Question

我最近使用jquery mobile sdk构建了一个Web应用程序。一切都像魅力，但现在我想调整一个导航栏按钮，以适应导航栏，已调整为44px而不是32px。我使用以下代码创建按钮。

<div data-role="header" data-position="fixed" class="header-custom">
        <a href="#" class="ui-btn-right" data-icon="refresh" data-iconpos="notext" id="refreshButton">Refresh</a>
    </div><!-- /header -->

我的目标是调整按钮的大小（以及图标！:)）以再次适应新的自定义标题。

Answer 1

不幸的是，如果您想保持图标清晰，则必须执行自定义图标。

参见说明：
http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Answer 2

您可以调整图标大小！查看jquery.mobile.icons.min.css文件。有图标定义为svg字符串。复制您喜欢的类进行编辑，并将其写入您自己的custom.css文件中。现在寻找

width%3D%2214px%22%20height%3D%2214px

在svg String中并将14更改为您想要的任何内容！在新的CSS课程结束时，您可以添加一个＆＃34;！important＆＃34;到background-image确保，你覆盖现有的jquery类！

如果要从元素调整图标大小，则必须另外添加一个类。（在这种情况下，将svg String更改为50px）

.icon50px {     
    height: 50px !important;
    width: 50px !important;
    font-size: 13px !important; }

.icon50px:after {
    height: 50px !important;
    width: 50px !important;
    margin-left: -25px;
    margin-top: -25px; }

玩得开心;）

调整Jquery Mobile中的按钮图标

2 个答案: