jquery - 调整 Jquery Mobile 中按钮图标的大小

Question

我最近使用 jquery mobile sdk 构建了一个网络应用程序。一切都很顺利，但现在我想调整导航栏按钮的大小，以适应导航栏，导航栏的大小已调整为 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 -->

我的目标是调整按钮(还有图标!:))的大小以再次适应新的自定义标题。

Answer 1

您可以调整图标的大小!查看 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; }

玩得开心;)