如何將href添加到它下面的fontawesome圖標和單詞？

Question

我創建了以下內容：

 <div style="margin-top: 1.2em"> 
      <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i> 
      <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i> 
      <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i> 
     </div> 

有人能告訴我怎樣才能使它對這些圖標或文字之一，所以點擊下面就帶我到一個鏈接？

我想什麼做的是讓它儘量的圖標顯示爲：

xxxxxx  xxxxxx  xxxxxx 
xxxxxx  xxxxxx  xxxxxx 
xxxxxx  xxxxxx  xxxxxx 

    Home  Admin  Setting 

所以，當我從圖標頂部點擊下面的字底部的任何地方，這是與點擊相同：

<a href="/home">Home</a> 
<a href="/admin">Admin</a> 
<a href="/setting">Setting</a> 

鏈接。

更新

我相信，也許我需要使用的DIV的解決方案。我試了兩個給我的答案，並且都使圖標顯示爲垂直。另外第二個答案可能不是想法，因爲它有多個hrefs的相同鏈接。希望有人可以用另一個答案來幫忙。

Answer 1

沒有必要的div。像這樣的東西應該工作。 fiddle

<a href="/home" class="icon-block"> 
    <i class="icon-home icon-4x"></i> 
    <span>Home</span> 
</a> 
<a href="/admin" class="icon-block"> 
    <i class="icon-th icon-4x"></i> 
    <span>Admin</span> 
</a> 
<a href="/settings" class="icon-block"> 
    <i class="icon-cog icon-4x"></i> 
    <span>Settings</span> 
</a> 

CSS

a.icon-block { 
     display:inline-block; 
     width:10em; 
     float:left; 
     text-align:center; 
    } 

    a.icon-block i, 
    a.icon-block span { 
     display:block; 
     width:100%; 
     clear:both; 
    } 

Answer 2

嘗試：

<div style="margin-top: 1.2em"> 
    <a href="/home"> 
     <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i> 
     <br /> 
     <span class="normal">Home</span> 
    </a> 
    <a href="/admin"> 
     <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i> 
     <br /> 
     <span class="normal">Admin</span> 
    </a> 
    <a href="/setting"> 
     <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i> 
     <br /> 
     <span class="normal">Setting</span> 
    </a> 
</div> 

然後在你的CSS，給。中性類不同的字體家族

.normal{ 
    font-family: "Your Font"; 
} 

Answer 3

試試這個div版本。

<div style="margin-top: 1.2em"> 
    <div class="go-inline"> 
     <div> 
      <a href="/home"> 
       <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i> 
      </a> 
     </div> 
     <div class="go-middle"> 
      <a href="/home"> 
       <span class="normal">Home</span> 
      </a> 
     </div> 
    </div> 
    <div class="go-inline"> 
     <div> 
      <a href="/admin"> 
       <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i> 
      </a> 
     </div> 
     <div class="go-middle"> 
      <a href="/admin"> 
       <span class="normal">Admin</span> 
      </a> 
     </div> 
    </div> 
    <div class="go-inline"> 
     <div> 
      <a href="/setting"> 
       <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i> 
      </a> 
     </div> 
     <div class="go-middle"> 
      <a href="/setting"> 
       <span class="normal">Setting</span> 
      </a> 
     </div> 
    </div> 
</div> 

和CSS類

go-middle{ text-align:center;} 
go-inline { display:inline-block; vertical-align:top;} 

P/S。一些CSS/DIV結構編輯將會很好。 嘗試用你自己的風格來構建它。 = D