78

Bootstrap フレームワークのボタン内で、font-awesome アイコンをテキストと垂直方向に揃えるのに問題があります。行の高さを設定するなど、多くのことを試しましたが、何も機能していません。

<button id="edit-listing-form-house_Continue" 
        class="btn btn-large btn-primary"
        style=""
        value=""
        name="Continue"
        type="submit">
    Continue
    <i class="icon-ok" style="font-size:40px;"></i>
</button>

http://jsfiddle.net/fPXFY/

どうすればこれを機能させることができますか?

4

4 に答える 4

129

によって設定されるルールが 1 つありfont-awesome.cssますが、これは上書きする必要があります。

インラインではなく CSS ファイルでオーバーライドを設定する必要がありますが、基本的には icon-ok クラスがvertical-align: baseline;デフォルトで設定されており、ここで修正しました。

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

例: http://jsfiddle.net/fPXFY/4/とその出力は次のとおりです。

ここに画像の説明を入力

この例では、上のアイコンのフォント サイズを に縮小しました。これは、ボタンのサイズに対して が大き30pxすぎる40pxためです。ただし、これは純粋に個人的な見解です。必要に応じて、ボタンのパディングを増やして補正できます。

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

生成: http://jsfiddle.net/fPXFY/5/その出力は次のとおりです。

ここに画像の説明を入力

于 2013-07-05T00:30:35.483 に答える