10

自動的に生成されるマークアップにフォントの素晴らしいアイコンを使用したいのですが、それを変更できません。

次のマークアップは、リストを表示しolます。数字をアイコンに置き換えたい。

<ol class="flex-control-nav">
    <li><a class="flex-active">1</a></li>
    <li><a class="">2</a></li>
    <li><a class="">3</a></li>
    <li><a class="">4</a></li>
    <li><a class="">5</a></li>
</ol>

これが私が試していることです：

.flex-control-nav a:before  { 
    font-family: FontAwesome; 
    font-size: 30px; 
    display: inline-block; 
    content: '\f137';
}

問題：

上記のコードを使用すると、各リスト項目にアイコンを表示できますが、番号も表示されます。数字を隠したい。を使用してみtext-indentましたが、アイコンも削除されます。

4

4 に答える 4

22

使うだけ

.flex-control-nav a
{
    font-size:0;
}

ここにワーキングフィドルがあります

また：

.flex-control-nav a
{
    visibility: hidden;
}
.flex-control-nav a:before
{
    visibility: visible;
}

ここにワーキングフィドルがあります

于 2013-10-07T07:09:08.317 に答える
3

編集：あなたが求めていたものを本当に誤解していたと思いますが、誰かが数字を取り除きol、アイコンに置き換える方法を知りたがっている場合は、ここに解決策があります.

基本的に、要素にlist-style-type: none;付けられたリスト番号を取り除きました。次に、デフォルトliのマージンを削除した後、左側にマージンを明示的に追加しました。ol最後に、ページの流れからアイコンを取り除き、バウンディング ボックスの配置に依存しないため、負のマージンで左に移動しました。補足として、リスト項目が適切に離されるように、line-height各リスト項目をアイコンと同じにしました。font-size

CSS:

.flex-control-nav {
    padding: 0;
    margin: 0;
    margin-left: 40px;
}
.flex-control-nav li  {
    line-height: 30px;
    list-style-type: none;
}
.flex-control-nav li:before  { 
    font-family: FontAwesome; 
    font-size: 30px;
    position: absolute;
    margin-left: -30px;
    content: '\f137';
}

JSビンはこちら。

于 2013-10-07T07:21:25.583 に答える
0 

.flex-control-nav a  { 
  font-size: 30px; 
  display: inline-block; 
  text-indent: -999em;
}
.flex-control-nav a:after  { 
  font-family: "FontAwesome"; 
  display: block; 
  content: "\f137";
  text-indent: 0;
}
/* -- Change colour of active item -- */
.flex-control-nav a.flex-active:after  { 
  color: red;
}
/* -- Remove numbers from ol -- */
.flex-control-nav li  {
    list-style-type: none;
}
<ol class="flex-control-nav">
    <li><a class="flex-active">1</a></li>
    <li><a class="">2</a></li>
    <li><a class="">3</a></li>
    <li><a class="">4</a></li>
    <li><a class="">5</a></li>
</ol>

于 2016-02-27T00:30:10.207 に答える