ボタン内のテキストとアイコンの垂直方向の位置関係

質問

Bootstrapフレームワークの下でボタン内のテキストとfont-awesomeアイコンを垂直に揃えるのに苦労しています。line-height を設定するなど、多くのことを試しましたが、何もうまくいきません。

<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/

どうすればこれを使えるようになりますか？

どのように解決するのですか？

で設定されているルールがあります。 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/ という出力があります。