web-dev-qa-db-ja.com

FontAwesomeまたはGlyphiconsをcss：beforeで使用します

content:疑似要素を使用するときにcss :before要素にHTMLを埋め込む方法はありますか？

次のようなユースケースで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>
csstwitter-bootstrapfont-awesome
75
tig

あなたが説明しているのは、実際にはFontAwesomeがすでにやっていることです。 FontAwesomeフォントファミリを、「icon-」で始まるクラスを持つ要素の::before疑似要素に適用します。

[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';}
153
keithwyland

@keithwylandの答えは素晴らしいです。 SCSSミックスインは次のとおりです。

@mixin font-awesome($content){
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    content: $content;
}

使用法：

@include font-awesome("\f054");
3
dude

受け入れられた回答（2019年7月29日現在） は、FontAwesomeのより新しいSVG-with-JSアプローチを使用していない場合にのみ有効です。その場合は、 CSS Pseudo-Elements HowTo の指示に従う必要があります。基本的に、次の3つに注意する必要があります。

  • sCRIPTタグ「data-search-pseudo-elements」を含むデータ属性をJSに配置します
  • 擬似要素自体にdisplay：noneを持たせる
  • 必要なアイコンの適切なフォントファミリとフォントウェイトの組み合わせ：「Font Awesome 5 Free」および400または900
0
flowtron

リスト項目の場合、目的の効果を達成するために使用できる小さなCSSがあります。

ul.icons li {
  position: relative;
  padding-left: -20px; // for example
}
ul.icons li i {
  position: absolute;
  left: 0;
}

OS XのSafariでこれをテストしました。

0
DarkBlue

このアプローチは避けてください。 vertical-alignのデフォルト値はbaselineです。擬似要素のみのフォントファミリを変更すると、要素が異なるフォントになります。異なるフォントは、異なるフォントメトリックと異なるベースラインを持つことができます。異なるベースラインを揃えるには、要素の全体の高さを増やす必要があります。 アクションでこの効果を参照 。

フォントアイコンごとに1つの要素を用意することをお勧めします。

0
Keyamoon