箇条書きにFont Awesomeアイコンを使用し、リストアイテム要素を1つにする

Font Awesome（http://fortawesome.github.com/Font-Awesome/）アイコンをCMSの順序なしリストの箇条書きとして使用できるようにしたいと考えています。

CMSのテキストエディターは生のHTMLのみを出力するため、追加の要素/クラスを追加できません。

つまり、マークアップが次のようになったときにアイコンを表示します。

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

最初の問題は、Font Awesomeが別のfont-family属性を必要とするかどうかを確認することができます。

これは純粋なCSSを使用して可能ですか？または、jQueryのようなものを使用して、各リスト項目の先頭に要素を追加する必要がありますか？

背景画像のフォールバックを使用できることは承知していますが、可能であればFont Awesomeを使用することをお勧めします。

解決：

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

このテクニックについて詳しく説明しているブログ投稿は次のとおりです。

新しいfontawesome（バージョン4.0.3）は、これを本当に簡単にします。以下のクラスを使用するだけです。

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

この（新しい）URLに従って：http : //fontawesome.io/examples/#list

上記の回答と他の場所で示されたいくつかの回答に基づいて構築し、：before疑似クラスとともに絶対配置を使用することをお勧めします。上記の例（および同様の質問）の多くは、Font Awesomeの処理方法など、カスタムHTMLマークアップを利用しています。これは元の質問に反するものであり、厳密には必要ありません。

ここでデモ

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

基本的にはそれだけです。Font Awesomeチートシートの CSSコンテンツで使用するISO値を取得できます。バックスラッシュを前に付けた最後の4つの英数字を使用するだけです。そう[]なる\f058

サンプルページに、順不同リストと並べてFont Awesomeを使用する方法の例があります。

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

このコードを試しても機能しない場合は、ライブラリが正しく含まれていません。彼らのウェブサイトによると、あなたはそのようなライブラリを含めるべきです：

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

また、彼のWebサイトCSS Tricks にあるアイコンフォントに関する風変わりなChris Coyierの投稿も確認してください。

ここでは、彼によるスクリーンキャストと、独自のアイコンフォントフェイスを作成する方法について説明しています。

@多摩、あなたはこの答えをチェックしたいかもしれません：箇条書きとしてFont Awesomeアイコンを使う

基本的に、FontAwesomeと他の回答で提案されているように、追加のマークアップを必要とせずにCSSのみを使用することでこれを実現できます。

つまり、最初の投稿で述べたのと同じ基本的なマークアップを使用して、必要なことを実現できます。

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

ありがとう。

標準<ul>と<i>内部を使用した私のソリューション<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

ここでデモ

Font Awesome 5では、上記の回答の一部にいくつかの変更を加えたように、純粋なCSSを使用してそれを行うことができます。

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

正しいフォントの太さがなければ、空白の四角形のみが表示されます。

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define