web-dev-qa-db-ja.com

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

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を使用することをお勧めします。

cssfont-awesome
115
BaronGrivet

溶液：

http://jsfiddle.net/VR2hP/

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

ブログ投稿 は、この手法を詳細に説明しています。

224
Inluxc

新しい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

140
lol

上記および他の場所で与えられたいくつかの答えに基づいて構築し、：before pseudo classとともに絶対配置を使用することをお勧めします。上記の例（および同様の質問）の多くは、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 cheatsheet のCSSコンテンツで使用するISO値を取得できます。バックスラッシュが前に付いた最後の4文字の英数字を使用するだけです。 [&#xf058;]は\f058になります

11
Ryan

examples page の順序付けられていないリストとともに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">

また、気まぐれな アイコンフォントに関するクリスコイエの投稿 彼のウェブサイト CSSトリック をチェックしてください。

これがスクリーンキャストです 彼によって、あなた自身のアイコンのフォントフェースを作成する方法についても話します。

4
cereallarceny

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

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

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

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

ありがとう。

1
Ricardo Zea

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

enter image description here

ここにデモ

1
Marco Allori