12

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>

このリストは、リスト項目が1行である限り、私の目的には問題なく表示されます。ただし、リストアイテムが複数行の場合、2行目以降は適切にインデントされません（デフォルト）。

これらのアイコンを標準のcssの箇条書きとして使用できると便利です。このようにすると、複数の行項目が自動的に適切にインデントされるためです。

これを実現するための簡単でエレガントな方法はありますか？このようなマークアップを使用できれば素晴らしいと思います。

<ul class="icon-bullets">
    <li class="icon-ok">Lists</li>
    <li class="icon-ok">Buttons</li>
    <li class="icon-ok">Button groups</li>
    <li class="icon-ok">Navigation</li>
    <li class="icon-ok">Prepended form inputs</li>
</ul>

つまり、特定のアイコンクラスを再利用しますが、それらをli要素の一部にします。

4

5 に答える 5

12

パーティーに遅れていることは知っていますが、選択した解決策でさえ、問題を完全に解決できるとは思いません。これは、特定の問題を可能な限り正確に解決することです。

OPの主要な質問によると、「これらのアイコンを標準のcssの箇条書きとして使用できると便利です。このようにすると、複数の行項目が自動的に適切にインデントされるからです。」

私は同じ問題を抱えていましたが、これを解決する方法は次のとおりです。にaを追加してpadding-left:から、<ul>に「正」margin-right:と「負」を追加margin-left:しli:beforeます。

デモに表示されるのは基本的に次のとおりmargin:0 5px 0 -15px;です。

デモ

いくつかのメモ：

  1. このソリューションにはCSSのみが必要であり、追加のマークアップは必要ありません。

  2. これは複数行のコンテンツで機能するため、コンテンツが2行以上に折り返されている場合、アイコン/リストアイテムの下には表示されません。

  3. Font AwesomeやBootstrapのように余分なマークアップを使用する必要はありません。これは、コンテンツをスタイルから機能から分離する必要があることを私たち全員が知っているため、まったく間違っています。アイコンを使用するためにマークアップを追加することは、明らかにコード膨張です。私のソリューションでは、次のような単純なマークアップを使用しています。

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

  4. フォントを読み込めなかったので、アイコン/リストアイテムを説明するため»の値として文字を使用しました。content:'»'ただし、@font-face誰でも使用してフォントファイルへのパスを置き換えることができるように、すべての宣言を残しました。そのようです：

    url("path/to/font-name.woff") format("woff"),

  5. アイコン/リストアイテムを適切に配置するために、のマージン値を操作する必要がある場合がありli:beforeます。これは、上記のソリューション、またはFontAwesomeとBootstrapのソリューションのいずれかを使用する場合にとにかく行う必要があります。

于 2013-02-11T05:19:34.860 に答える
12

ヨハンの答えは間違っています。Font Awesomeは、大きな背景画像ではなく、Webフォントを使用しています。

次のように、クラスをliタグに簡単に配置できることに注意してください。

<ul>
    <li class="icon-ok">Lists</li>
    <li class="icon-ok">Buttons</li>
    <li class="icon-ok">Button groups</li>
    <li class="icon-ok">Navigation</li>
    <li class="icon-ok">Prepended form inputs</li>
</ul>

ただし、注意点が1つあります。条件付きのie7スタイルシートを使用しても、ie7では機能しません。アイコンだけを残して、リストアイテムが消えます！ie7をサポートしていない場合は、条件付きスタイルシートを省略してください。少なくとも、ie7を使用するのに十分な不幸な人は、アイコンなしでリストを読み取ることができます。

お役に立てれば。

于 2012-09-26T14:47:52.603 に答える
7

icon-okファッショナブルに遅い...からクラスを削除しli、リストがアイコンを箇条書きとして使用するように設定します。アイコンの Font Awesome 詳細ページから Unicode 文字を取得します。この場合、バージョン 4icon-okに移行されました。Unicode は同じです。icon-checkf00c

ul.ok {
    list-style-type: none;
    margin-left: 0;
    padding-left: 1em;
}

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


<ul class="ok">
    <li>Lists</li>
    <li>Buttons</li>
    <li>Button groups</li>
</ul>

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

コードのアイコンを検査する方法

インスペクター情報をありがとう@armfoot。::beforeDOM ツリーの要素をクリックして、その方法を説明するこのスクリーンショットを追加しました。

于 2014-02-03T20:46:27.067 に答える
2

複数列のリストの場合、これを使用します。

ul.twocolumn, ol.twocolumn {
  -moz-column-count: 2;
  -moz-column-gap: 5px;
  -ms-column-count: 2;
  -ms-column-gap: 5px;
  -webkit-column-count: 2;
  -webkit-column-gap: 5px;
  column-count: 2;
  column-gap: 5px;
  list-style-position: inside; /* bugfix for hidden bullets/numbers */
}

通常、宣言するとき：

<ul class="fa-ul twocolumn">
  <li><i class="fa-li fa fa-whatever-icon"></i> foo</li>
  <li><i class="fa-li fa fa-whatever-icon"></i> bar</li>
</ul>

しかし、それは機能しません... Font Awesome アイコンは、何らかの理由で、1 より大きい列数で表示されないことに注意してください。これを Chrome でテストしたところ、-webkit-column-count を切り替えると不一致が表示されます。 2

于 2015-01-27T18:24:05.003 に答える