如何在固定页脚中使用蒙版图像作为图标？

Question

这是我的页脚：

<div data-role="footer" data-id="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li><a href="#" data-icon="home">Home</a></li>
            <li><a href="#nearby" data-icon="nearby">Nearby</a></li>
            <li><a href="#search" data-icon="search">Search</a></li>
        </ul>
    </div>
</div>

这是我使用蒙版图像的自定义图标：

.ui-icon-nearby {-webkit-mask-image: url(../i/nearby.png); -moz-mask-image: url(../i/nearby.png); background-color: #ffffff}

导航栏中的“附近”项目上有一个白色方块，没有图标......

但如果我在页脚div中添加data-visible-on-page-show="false"，我会看到图标，但页脚不再固定，它位于页面底部...

谢谢！