Jqueryボタンのアイコン：アイコンとテキストの間にスペースはありませんか？ jQueryのUIへ

Question

おかげで、私は簡単に行うことができますのみ

問題はフォントがテキスト+アイコンアイコンが付いたボタンを持つ

とテキストと

• たボタンのみ
• 持つボタンです大きすぎてこのCSSを追加しました：

  .ui-button .ui-button-text { 
      font-size:60%; 
  } 
  

  今は問題です私は私のアイコンと私のテキストの間にスペースがないのですか？

  デモ（jsFiddle）についてはこちらをご覧ください：http://jsfiddle.net/Rn9tg/71/

  任意の修正はありますか？

  ありがとうございました。

Answer 1

[UPDATE]：左余白のルールを使用すると、アイコンボタンのみでは動作しません。私はleft-marginルールをtext-indentルールに置き換えました。これは問題を解決するようです。

は

.ui-button-text:nth-child(2) { 
    text-indent: 5px; 
}​ 

に

親の第二子であるあらゆる ui-button-textクラスは、5pxのの左マージンを持たなければならない。このよう指示し、次のCSSルールを追加します。この場合、ラベルの前にはアイコンが常に表示されます。

nth-child疑似セレクタについては、css-tricksをご覧ください。

[UPDATE] Internet Explorer、特に古いバージョンでは、nth-chil擬似セレクタが正しくサポートされていません。この場合、jqueryを使用してIEに追加のクラスを強制的に使用させる必要があります。

IE排他的なCSSファイルに以下のクラスを追加します。jQueryを使って

.button_left_margin_label { 
    text-indent: 5px; 
} 

を、アイコンを休閑ラベルに上記のクラスを使用するようにIEを強制：

if IE {$('.ui-button-text:nth-child(2)').addClass('button_left_margin_label');} 

Answer 2

<a data-bind="click: greet, jqButton: { icons: { primary: 'ui-icon-gear' }}">&nbsp&nbsp&nbspTest</a> 

テキストとアイコンの間にスペースが入るように、テキストの左余白を追加するだけです。 jsfiddleを確認してください。

Answer 3

テキストの前に改行なしのスペース（または2つ）を追加します。このようにjsFiddle。だから、ちょうど "テスト"の代わりに、"   Test"

Answer 4

私はコードと遊んで、あなたのためのソリューションを得るにリンクしているデモを見てきました。ここには、CSSです

.ui-button .ui-button-text { 
    font-size:60%; 
    min-height: 13px; 
    margin-left:5px; 
}​ 

左にテキストに余白を入れれば、スペースが追加されます。

は私が..私はあなたを助け願ってい