css - 任意のタグで Font Awesome クラスを使用するには?

Question

私は非常に強く、マークアップに非セマティック タグを散らかさないようにしたいと考えており、主なユース ケースであるヘッダーなど、他の要素で CSS クラス<i>を使用しようとしています。icon-*

次のマークアップがあります。

<div class="box-header">
    <h2><i class="icon-list-ul"></i><span class="break"></span>Unordered List</h2>
</div>

<div class="box-header">
    <h2 class="icon-list-ul">Unordered List</h2>
</div>

1 つ目は元のマークアップで、2 つ目は目的のマークアップです。レンダリングすると、次のようになります。

分割線は後で考えます。ただし、テキストの「太さ」の違いに注意してください。Font Awesome はデフォルトでそのフォント (およびその他のいくつかのプロパティ) を CSS クラスが一致するものに適用することに気付きましたicon-*。この問題を修正するための最初の試みは、この css を変更することでした。

[class^="icon-"],
[class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    *margin-right: .3em;
}

フォントの選択が:beforeアイコンのコンテンツにのみ適用されるようにするには、次のようにします。

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    *margin-right: .3em;
}

次のスクリーンショットに示すように、別の問題があります。

フォントの太さは通常の (薄い) 値に戻っていますが、標準のマークアップと希望するマークアップの両方のケースで、テキストの配置が大幅に減少しています。ここで何が起こっているのicon-*ですか?また、それらの要素自体の書式設定が狂わずに、任意の要素でクラスを使用するにはどうすればよいですか?

ご協力いただきありがとうございます。