font-awesomeアイコン付きのカスタムliリストスタイル


156

font-awesome(または他のアイコンフォント)クラスを使用してカスタムを作成することが可能かどうか疑問に思っています <li>リストスタイルタイプですか?

私は現在、これを行うためにjQueryを使用しています。つまり、

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

ただし、これは適切にスタイル設定されません <li>アイコンが実際の行頭文字ではなくテキストの一部であると見なされるためテキストがページ全体に回り込む。

任意のヒント?

回答:


333

CSSリストおよびカウンタモジュールレベル3が導入::marker擬似要素。私が理解したことから、それはそのようなことを可能にするでしょう。残念ながら、ブラウザはそれをサポートしていないようですです。

あなたができることは、親にいくつかのパディングを追加ulし、そのパディングにアイコンを引っ張ることです:

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

padding / font-size / etcをお好みに合わせて調整してください。ここに通常のフィドルがあります:http : //jsfiddle.net/joplomacedo/a8GxZ/

=====

これは、あらゆるタイプのアイコンフォントで機能します。FontAwesomeは、しかしながら、この「問題」に対処する独自の方法を提供します。詳細については、以下のDarrrrrrenの回答をご覧ください。


12
ここで、各Font Awesomeアイコンに対応するCSSコンテンツコードのリファレンスページを作成しました:astronautweb.co/snippet/font-awesome
Astrotim

1
このソリューションは、マルチカラムエレメントでも機能します。(その他その使用位置:絶対しない)
sbaechler

2
@Astrotimこれらのコードは、公式のFontAwesomeチートシートから直接入手できます:fortawesome.github.io/Font-Awesome/cheatsheet
rybo111

1
このソリューションでは、FontAwesome 5で使用するために若干の修正が必要です。font-familyが必要です: 'Font Awesome 5 Free'; それが機能するための明示的なフォントの太さと同様に。stackoverflow.com/questions/47894414/…を
kloddant

1
私は仕事にこれを取得するには、特定の重量を追加する必要がありますfont-weight: 900;
mayersdesign

62

あたりとしてフォント素晴らしいドキュメント

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

または、Jadeを使用します。

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala

これは、このように私のためにVUEで働いていた<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...
justin.m.chase

50

FontAwesomeに固有の代替の簡単なソリューションを提供したいと思います。別のアイコンフォントを使用している場合でも、JOPLOmacedoの回答は完全に問題なく使用できます。

FontAwesomeは、CSSクラスでリストスタイルを内部的に処理するようになりました

これが公式の例です:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

18
最後のFont-Awesomeでは、「icons-ul」を「fa-ul」に、「icon-li」を「fa-li」に置き換える必要があります。[コード] <ul class = "fa-ul"> <li class = " fa-li fa fa-check "> ... </ li> </ ul> [/ code]
Thomas

4

JOPLOmacedoの答えを追加したかった。彼の解決策は私のお気に入りですが、liに複数の行がある場合は、常にインデントに問題がありました。マージンなどで正しいインデントを見つけるのは面倒でした。しかし、これは私だけに関係するかもしれません。

私にとっては、:before疑似要素の絶対配置が最適です。私はセットpadding-leftUL上に残された、負の位置:beforeULのと同じ要素を、padding-left:before要素からコンテンツの距離を正しく取得するpadding-leftには、liにを設定します。もちろん李は相対的な位置を持っている必要があります。例えば

ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  /* make space for li's :before */
  list-style: none;
}

li {
  position: relative;
  padding-left: 0.4em;
  /* text distance to icon */
}

li:before {
  font-family: 'my-icon-font';
  content: 'character-code-here';
  position: absolute;
  left: -1em;
  /* same as ul padding-left */
  top: 0.65em;
  /* depends on character, maybe use padding-top instead */
  /*  .... more styling, maybe set width etc ... */
}

うまくいけば、これは明確であり、私以外の誰かにとって何らかの価値がある。


3
すべての初心者にとって、これはSASSと呼ばれるCSS前処理言語でフォーマットされています。純粋なCSSをこの方法でネストすることはできません。
JoshWillik 2014年

1

私はそれをこのようにしました:

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

または、色を変更したい場合は、これを試すことができます。

li::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 7px;

  background-color: orange;
  -webkit-mask-image: url("./assets/img/control.svg");
  -webkit-mask-size: cover;
}

0

@OscarJovannyのコメントに触発されて2つのことを行いました。

ステップ1:

  • ここからsvgとしてアイコンファイルをダウンロードします。フォントawesomeからこのアイコンのみが必要なので、

ステップ2:

<style>
ul {
    list-style-type: none;
    margin-left: 10px;
}

ul li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: orange;
    -webkit-mask-image: url("./assets/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}
</style>

結果

ここに画像の説明を入力してください

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.