回答:
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の回答をご覧ください。
font-weight: 900;
あたりとしてフォント素晴らしいドキュメント:
<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
<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...
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>
JOPLOmacedoの答えを追加したかった。彼の解決策は私のお気に入りですが、liに複数の行がある場合は、常にインデントに問題がありました。マージンなどで正しいインデントを見つけるのは面倒でした。しかし、これは私だけに関係するかもしれません。
私にとっては、:before
疑似要素の絶対配置が最適です。私はセットpadding-left
UL上に残された、負の位置:before
ULのと同じ要素を、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 ... */
}
うまくいけば、これは明確であり、私以外の誰かにとって何らかの価値がある。
私はそれをこのようにしました:
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;
}
@OscarJovannyのコメントに触発されて2つのことを行いました。
ステップ1:
ステップ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>
結果