问

从jQuery Mobile中删除/覆盖默认图标样式

手浪用户2602906465 发布于 2023-02-13 12:38

jquery

settings

text

css

在我的移动网络应用程序的标题中,我想提供一个设置图标,并且只提供一个设置图标.我不想要渲染任何样式.jQuery Mobile增加了很多样式,我只想删除它.我已经接近了,但遇到了一些问题.

在这里,我在标题中定义自定义图标:

这个CSS将删除它在图标下添加的按钮和背景颜色(.toolbar是我为标题定义的类):

.toolbar .ui-btn, .toolbar .ui-btn-up, .toolbar .ui-btn-hover, .toolbar .ui-btn-down, .toolbar     .ui-btn-inner,
.ui-btn-icon-left::after, .ui-btn-icon-right::after, .ui-btn-icon-top::after, .ui-btn-icon-bottom::after, .ui-btn-icon-notext::after
        {
            background:none;
        }

我需要能够设置其大小并始终保持在标题中心(对于访问该站点的所有设备).jQuery Mobile将图标放在边界框中,因此如果我将图标的大小增加到30px,它会切断部分图标.25px看起来不错,但是不够大,并且它没有完全集中在他们定义的框中.我需要摆脱那个框(在悬停时出现),你可以在这张图片中看到.

问题:是否有更好的方法将简单图标添加到标题中,避免重置/覆盖样式？或者我需要添加什么来获得所需的结果？我也想用纯文字按钮做这个,所以如果我能用一块石头杀死2只鸟就会很棒.

万分感谢!

PS.我正在使用jQM v 1.4.0 rc1.

1 个回答

这是一个DEMO FIDDLE

我给了按钮一个id并添加了类ui-nodisc-icon来隐藏光盘.
```
<a id="btnSettings" href="#settings" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-nodisc-icon" data-transition="flip"></a>
```
隐藏按钮的CSS和图标的全部大小是:
```
#btnSettings{
    background-color: transparent;
    border: 0;
}
#btnSettings:after {
    height: 30px;
    width: 30px;
    background-size: 30px 30px;
    margin-left: -15px;
    margin-top: -15px;
}
```
将宽度,高度和背景大小设置为所需的大小图标,然后将边距向左和向上设置为负高度和宽度的一半以使其保持居中.
2023-02-13 12:40 回答

时尚摄影师阿强_331

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签