Question

我正在尝试使用带有字体真棒按钮的jquery mobile，为此，我按照了这个post中描述的答案。但是，当我尝试在我的按钮中使用图标时，类display: inline-block具有i，并且该按钮现在不是全宽。我该如何解决这个问题？

Answer 1

我不会像推荐帖子中那样创建一堆类，而是使用标准<i class="fa fa-camera-retro"></i>并将其与一些CSS正确放置：

<button class="ui-btn ui-btn-fa"><i class="fa fa-camera-retro"></i>hello</button>

.ui-btn-fa {
    padding-left: 2.5em;
}
.ui-btn-fa .fa {
    position: absolute;
    left: 9px;
    width: 22px;
    height: 22px;
}
.ui-btn-fa .fa:before {
    line-height: 22px !important;
}

<强> DEMO

如果您喜欢标准jQM图标中的灰色磁盘，请添加一个新类（例如ui-fa-disk）和以下CSS：

<button class="ui-btn ui-btn-fa ui-fa-disk"><i class="fa fa-user"></i>hello</button>

.ui-fa-disk .fa {
    background-color: rgba(0, 0, 0, 0.298039);
    border-radius: 1em;
    font-size: 14px;
}

更新了 DEMO

Answer 2

如果您需要左右对齐图标或应用任何其他jQuery Mobile排列（例如，课程ui-btn-icon-right），则已接受的答案将无法正常工作。

我建议使用创建了dotcastle的库并在此Github repo中进行维护。这些图标的行为与它们是标准的jQuery Mobile图标完全相同。

使用示例：

<span class="ui-btn-icon-notext ui-icon-fa-500px"></span>

Answer 3

然后使用内联display: block。

Answer 4

对于仅图标按钮和带有白色图标的默认色板，我使用此CSS。

示例

带有一个非常宽的图标和一个圆形图标的图标。 Demo

fun main(args: Array<String>){
var stud= Student("Yash", 10)
}

class Student(name: String) {
init {
    println("name is $name")
}

constructor(n: String, id: Int): this(n) {
    println("name is $n")
    println("id is $id")
}
}

CSS

<button class="fa fa-address-card ui-btn ui-btn-icon-notext ui-corner-all"/>

<button class="fa fa-plus-circle ui-btn ui-btn-icon-notext ui-corner-all"/>

背景：

最初的方法非常简单，但是只允许使用黑色或深色字体超赞图标，因为jquery使用以下规则来渲染图标。白色图标将与此.ui-btn.fa.ui-btn-icon-notext { text-indent: 0px; color: #fff; background-color: #acacac; padding: 0.1em; font-size: 0.8985em; height: 1.75em; width: 1.75em; /* use inset box-shadow to simulate black background (:after) with opacity, which did blend white fa icons default outset black shadow*/ box-shadow: inset 0 0 0px 0.21em #f6f6f6, 0 1px 3px rgba(0,0,0,.15); text-shadow: none; } .ui-btn.fa.ui-btn-icon-notext:focus { box-shadow: inset 0 0 0px 0.21em #f6f6f6, 0 0 12px #38c; /* inset and default outset focus shadow */ } .ui-btn.fa.ui-btn-icon-notext:hover { box-shadow: inset 0 0 0px 0.21em #ededed, 0 1px 3px rgba(0,0,0,.15);; /* simulate default hover with box shadow, default outset black shadow */ } .ui-btn.fa.ui-btn-icon-notext:after { background-color: transparent; content: ""; }透明背景融合在一起。我避免使用 inset 框阴影代替它。

after

如何在jQuery移动按钮中使用字体真棒图标

4 个答案: