2015-01-15 170 views
0

如何將文本右鍵插入圖標(請參見圖片)?在圖標旁邊添加文本

我有這樣的代碼,其廣告Facebook的圖標:

<div class="col-sm-4 follow"> 
    <ul class="social"> 
    <li> 
    <a title="" data-placement="top" data-toggle="tooltip" class="facebook" href="https://www.facebook.com" ><i class="fa 
fa-facebook"></i></a> 
    </li> 
    </ul> 
</div> 

enter image description here

+0

您是否正在尋找在這http://jsfiddle.net/uf4bczoq/ – Jatin

+0

我已經嘗試過這種解決方案,但不幸的是文字屬於該圖標。 – Joneskvist

回答

1

只需添加一個span標籤圖像後,鏈接中......

HTML:

<div class="col-sm-4 follow "> 
    <ul class="social"> 
     <li> 
      <a title="" data-placement="top" data-toggle="tooltip" 
       class="facebook" href="https://www.facebook.com"> 
       <i class="fa fa-facebook" id="facebook-icon></i> 
       <span>Your Text Here</span> 
      </a> 
     </li> 
    </ul> 
</div> 

CSS:

#facebook-icon, 
#facebook-icon ~ span {display:inline-block;} 
+0

文本下面,我不知道爲什麼.. – Joneskvist

+0

請確保在CSS中,'I'和'span'是'display:inline -block'。 – Slime

+0

您可能需要觸摸CSS,因爲我之前使用過font-awesome,而且它們的圖標默認爲內聯,並且跨越默認內聯,因此它應該可以正常工作。如果它們是斷行的,那麼這意味着您在包含元素上的寬度會強制該寬度,或者'i'​​和'span'已更改默認值。您應該包含相關的CSS,以便我們可以檢查。 – Slime

0

HTML

<div> <img src="Your link here"> </div> 
<div> Your text here</div> 

CSS

div { 
    float:left} 

行可以通過使用<hr>標籤

+0

不要鼓勵人們使用漂浮物...他們應該被用作最後的手段。 – Slime

+0

我不知道如何實現你對我的問題的答案,你能幫助我嗎? – Joneskvist

+0

好吧,讓我以有組織的方式爲你做 –

1

這樣的事情?

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="col-sm-4 follow "> 
 
    <ul class="social "> 
 
     <li> 
 
      <a title="" 
 
      data-placement="top" data-toggle="tooltip" class="facebook" 
 
      href="https://www.facebook.com" > 
 
       <i class="fa fa-facebook"></i> 
 
       <!-- You can Place Text Here if you want it to be clickable with the link --> 
 
      </a> Text Here - not clickable with link 
 
     </li> 
 
    </ul> 
 
</div>

您可以將文本在兩個領域中,<a></a>標籤內部或外部的他們。如果它在<a>,它可以點擊。如果其外部,也不會

+0

這就是上面的評論中已經建議的:) – Jatin

+0

試過了,但文字下面有一些奇怪的原因。這是我的問題,從一開始,我似乎無法解決它haha – Joneskvist

相關問題