139

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

4

7 に答える 7

164

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

于 2014-01-07T04:36:16.363 に答える
15

上記の回答と他の場所で提供された回答のいくつかに基づいて構築し、 :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 つの英数字を使用するだけです。そう[&#xf058;]なる\f058

于 2014-09-01T09:01:06.957 に答える
4

例のページに、順序付けられていないリストと一緒にFontAwesomeを使用する方法の例があります。

<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サイトCSSTricksのアイコンフォントに関する気まぐれなChrisCoyierの投稿もチェックしてください。

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

于 2012-09-17T23:31:11.773 に答える
1

@多摩、あなたはこの答えをチェックしたいかもしれません: Using Font Awesome icons as bullets

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

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

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

ありがとう。

于 2013-02-11T05:23:28.333 に答える