80

疑似content:要素を使用する場合、css 要素に HTML を埋め込む方法はありますか?: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>
4

8 に答える 8

158

あなたが説明しているのは、実際にはFontAwesomeがすでに行っていることです。FontAwesome font-familyは::before、「icon-」で始まるクラスを持つ要素の疑似要素に適用されます。

[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';}
于 2012-08-12T04:14:55.793 に答える
4

@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");
于 2016-10-18T12:30:24.897 に答える
0

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

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

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

于 2012-09-05T21:40:23.367 に答える
-1

これは、あなたがやろうとしていることを行うための最も簡単な方法です:

http://jsfiddle.net/ZEDHT/

<style>
 ul {
   list-style-type: none;
 }
</style>

<ul class="icons">
 <li><i class="fa fa-bomb"></i> Lists</li>
 <li><i class="fa fa-bomb"></i> Buttons</li>
 <li><i class="fa fa-bomb"></i> Button groups</li>
 <li><i class="fa fa-bomb"></i> Navigation</li>
 <li><i class="fa fa-bomb"></i> Prepended form inputs</li>
</ul>
于 2014-05-19T22:45:42.710 に答える