堆疊的fontawesome圖標作爲項目符號列表的正確標記是什麼？

我想在項目符號列表中使用fontawesome圖標。該指南提供了以下標記：堆疊的fontawesome圖標作爲項目符號列表的正確標記是什麼？

<ul class="icons-ul"> 
    <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li> 
    <li><i class="icon-li icon-ok"></i>Buttons</li> 
    <li><i class="icon-li icon-ok"></i>Button groups</li> 
    <li><i class="icon-li icon-ok"></i>Navigation</li> 
    <li><i class="icon-li icon-ok"></i>Prepended form inputs</li> 
    <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li> 
</ul>

簡單。嗯？但是，我不想使用普通的舊圖標，而想使用字體真棒堆棧。 Comme ca：

<span class="icon-stack"> 
    <i class="icon-check-empty icon-stack-base"></i> 
    <i class="icon-twitter"></i> 
</span>

問題是;我怎麼能結合這兩個？在Stack Span類中粘貼icon-li不起作用。

來源

2013-08-28 alias51

這是你在找什麼？

<ul class="icons-ul"> 

    <li> 
     <span class="icon-stack icon-li"> 
     <i class="icon-check-empty icon-stack-base"></i> 
     <i class="icon-ok"></i> 
     </span> 
     Buttons 
    </li> 
    <li> 
     <span class="icon-stack icon-li"> 
     <i class="icon-check-empty icon-stack-base"></i> 
     <i class="icon-ok"></i> 
     </span> 
     …and many more with custom CSS 
    </li> 
    </ul>

來源

2013-08-28 22:22:49 brunettdan

我一直在努力解決同樣的問題。我想使用堆疊圖標作爲li的子彈。更重要的是，我一直試圖結合堆疊和正常的圖標在相同的ul已被證明是一場噩夢。

我設法解決了這個問題。我正在建立一個新網站，busycreator.com，如果你訪問，你會看到有社交媒體鏈接的頁腳中的第二列。 Dribbble圖標實際上是一個堆棧（Dribbble徽標和一個實心圓圈）。下面是我所做的：

<ul class="fa-ul" style="margin-left:21px;"> 
    <li style="margin-bottom:6px;"> 
     <i class="fa-li fa fa-pinterest-square fa-lg" style="color:#c40f2d;"></i> 
      <a href="#" title="Pinterest">pinterest</a> 
    </li> 
<li class="fa-stack"> 
     <i class="fa-li fa fa-circle fa-lg" style="color:#e2418a;"></i> 
     <i class="fa-li fa fa-dribbble fa-lg" style="color:#be0f64;"></i> 
      <a style="position:relative; top:-3px;" href="#" title="Dribbble">dribbble#</a> 
    </li> 
</ul>

正如你所看到的，有內嵌樣式，這是從來沒有的想法相當數量。有一些使用邊距/填充和相對定位的手動定位，但這是唯一有效的工作。我感覺有很多外部樣式表互相競爭，所以內聯樣式是我設法使其工作的唯一方式。

有一個副作用，那就是鏈接名稱 - <a>和</a>之間的東西 - 不能包含空格。否則，每個單詞將自行分行，在列表中形成一個列表。

隨意建立在這種愚蠢和讓它正常工作。我會很感激。

來源

2014-01-19 18:58:31 scottperezfox

在新版本的font awesome（4.0.3）上，您可以使用引導程序的list-unstyled類來獲得相同的效果。

<ul class="list-unstyled"> 
    <li> 
    <span class="fa-stack"> 
     <i class="fa fa-circle fa-stack-2x"></i> 
     <i class="fa fa-file-text fa-stack-1x fa-inverse"></i> 
    </span> 
    </li> 
</ul>

來源

2014-04-29 14:23:35

堆疊的fontawesome圖標作爲項目符號列表的正確標記是什麼？

回答

相關問題