web-dev-qa-db-ja.com

フォント素晴らしいアイコンのカスタム李リストスタイル

私はそれがカスタムの<li> list-style-typeを作成するためにfont-awesome（または他のアイコンフォント）クラスを利用することが可能であるかどうか疑問に思いますか？

私は現在これを行うためにjQueryを使っています。

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

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

任意のヒント？

csshtml-listsfont-awesome
138
Darrrrrren

CSSリストおよびカウンタモジュールレベル は::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の回答をご覧ください。

297
banzomaikaka

Font Awesome Documentation に従って：

<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
54
cutemachine

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>
46
Darrrrrren

私はJOPLOmacedoの答えに加えたいと思いました。彼の解決策が私のお気に入りですが、liに複数の行があるときはいつもインデントに問題がありました。余白などで正しいインデントを見つけるのは大変でしたが、これは私だけに関係するかもしれません。

私にとっては、：before疑似要素の絶対位置は最もうまくいきます。 ulにpadding-leftを設定し、：before要素に負の位置を設定し、ulのpadding-leftを設定しました。 ：before要素の右からコンテンツまでの距離を取得するには、liに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 ... */
}

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

2
habsi

私はこのようにしました：

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
Oscar Jovanny

画像をliアイコンとしてアップロードする場合は、ul {list-style-image: url("")}を使用できます。

0
Jerry 132