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

Question

font-awesome（または他の象徴的なフォント）クラスを利用してカスタム<li>リストスタイルタイプを作成することは可能かどうか疑問に思っていますか？

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

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

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

任意のヒント？

Answer 1

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>

パディング/フォントサイズなどをお好みに合わせて調整してください。それだけです。

コード全体でスペーシングユニットを繰り返すのではなく、css変数にスペーシングユニットを配置することもできます。

=====

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

Answer 2

Font Awesomeのドキュメントによると：

<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

Answer 3

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>

Answer 4

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

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

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 ... */
}

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

Answer 5

@OscarJovannyのコメントに触発された2つのことを、いくつかのハックで行いました。

ステップ1：

• ここからアイコンファイルをsvgとしてダウンロードします。必要なのはfontawesomeのこのアイコンだけです。

ステップ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>

結果

Answer 6

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

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;
}

Answer 7

::marker要素が常緑の ブラウザ:hoverで利用できるようになったので、これは、マーカーの変更を使用するなど、要素を使用する方法です。ご覧のとおり、リストアイテムマーカーとして任意のUnicode文字を使用でき、カスタムカウンターを使用することもできます。

@charset "UTF-8";
@counter-style fancy {
  system: fixed;
  symbols:   ;
  suffix: " ";
}

p {
  margin-left: 8em;
}

p.note {
  display: list-item;
  counter-increment: note-counter;
}

p.note::marker {
  content: "Note " counter(note-counter) ":";
}

ol {
  margin-left: 8em;
  padding-left: 0;
}

ol li {
  list-style-type: lower-roman;
}

ol li::marker {
  color: blue;
  font-weight: bold;
}

ul {
  margin-left: 8em;
  padding-left: 0;
}

ul.happy li::marker {
  content: "";
}

ul.happy li:hover {
  color: blue;
}

ul.happy li:hover::marker {
  content: "";
}

ul.fancy {
  list-style: fancy;
}

<p>This is the first paragraph in this document.</p>
<p class="note">This is a very short document.</p>
<ol>
  <li>This is the first item.
    <li>This is the second item.
      <li>This is the third item.
</ol>
<p>This is the end.</p>

<ul class="happy">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="fancy">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Answer 8

これは私のバージョンです：FontAwesome 5 ul

ul {
  list-style-position: inside;
  padding-left: 0;
}
ul li {
  list-style: none;
  position: relative;
  padding-left: 20px;
}
ul li::before {
  position: absolute;
  top: calc(50% - 4px); /* half font-size */
  left: 0px;
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-size: 8px;
  font-weight: 900;
}

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
  <li>Line 5</li>
</ul>

Answer 9

リファレンスを参照してください：https ：//fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list

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