[解決済み] FontAwesomeやGlyphiconsをcss :beforeで使用する。

質問

HTMLをCSSに埋め込む方法はありますか？ content: 要素を使用しているときに :before 擬似要素を使用した場合、どのようになりますか？

こんなユースケースでFont Awesome（またはGlyphicon）を使いたいのですが。

    h1:before {
        content: "X";
        padding-right: 10px;
        padding-left: 10px;
        color: @orangeLight;
    }

ここで X は次のようなものです。 <i class="icon-cut"></i> .

もちろん、HTML でこれを手動で行うこともできますが、私はどうしても :before を使いたいのです。

同様に <i> をリストの弾丸として使う方法はありますか？ これは動作しますが、複数行の箇条書きの項目に対して正しく動作しません。

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

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

あなたが説明していることは、実はFontAwesomeがすでに行っていることです。彼らはFontAwesomeのfont-familyを ::before 擬似要素に FontAwesome font-family を適用しています。

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

次に、疑似要素である ::before を使って、そのクラスの要素にアイコンを配置します。先ほどは http://fortawesome.github.com/Font-Awesome/ と入力し、コードを検査すると、このようになります。

.icon-cut:before {
  content: "\f0c4";
}

ですから、もう一度アイコンを付けたい場合は ::after 要素で実現できます。また、ご質問の2番目の部分については ::after 擬似要素を使用して、リストアイテムのように見えるように箇条書きの文字を挿入します。そして、絶対位置決めを使って左側に配置する、または似たようなことをします。

i:after{ content: '\2022';}