如何在jQuery移動按鈕中使用字體真棒圖標

我想用字體真棒按鈕jquery移動，這樣做，我按照post中描述的答案。但是，當我嘗試在我的按鈕中使用圖標時，類ui-icon-fa已有display: inline-block，並且該按鈕現在不是全寬。我該如何解決這個問題？如何在jQuery移動按鈕中使用字體真棒圖標

來源

2015-06-23 Javier Enríquez

爲什麼你還不如說是使用字體真棒：<我類=「FA FA-車FA-FW」> – aorfevre

因爲產生旁文本的圖標。我想要像其他jQuery按鈕那樣位於左側的圖標。 –

而不是創造一堆類如提及帖子，我會使用標準<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

來源

2015-06-23 20:52:45 ezanker

不幸的是「顯示塊」 jQuery Mobile圖標，如果您使用特殊類進行對齊和其他排列（例如'ui-btn-icon-right'）。 –

@ ElliotB.just根據需要添加類：http://jsfiddle.net/tasqnjb8/27/ – ezanker

這基本上是我的觀點 - 每當遇到與對齊，大小，顏色相關的jQuery Mobile本機類時，您都必須編寫其他類等等。通過下面發佈的Font Awesome to JQM對話庫，所有JQM本地類都可以正常工作，而無需編寫其他自定義類。 –

只需使用display: block即可。

來源

2015-06-23 20:25:38

圖標的哪個容器，我只有： ''text –

你可以用它的圖標本身 –

只是重置顯示，然後，用：用這種方法的圖標不會表現得像母語 –

，如果你需要對齊左，右的圖標或應用任何其他jQuery Mobile的排列接受的答案將無法正常工作（例如，類ui-btn-icon-right）。

我會推薦使用庫創建的dotcastle並維護在此Github repo。圖標的行爲與標準jQuery Mobile圖標完全相同。

實例：

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

來源

2016-10-13 04:47:25

如何在jQuery移動按鈕中使用字體真棒圖標

回答

相關問題