2

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

<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 -->

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

4

2 回答 2

2

不幸的是，如果你想保持图标清晰，你将不得不做自定义图标。

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

于 2013-01-09T13:43:22.057 回答
2

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

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

在 svg 字符串中并将 14 更改为您想要的任何内容！在新的 css 类结束时，您可能会在背景图像中添加一个“！important”，以确保覆盖现有的 jquery 类！

如果要从 a 元素调整图标的大小，则必须另外添加一个额外的类。（在这种情况下，将 svg 字符串更改为 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; }

玩得开心 ;）

于 2014-12-12T14:20:48.413 回答