在图标旁添加文本

Question

如何在图标右侧插入文本（见图片）？

我有以下代码，它添加了一个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>

- Joneskvist

---

你在看这个 http://jsfiddle.net/uf4bczoq/ 吗？ - Jatin

我已经尝试过那个解决方案，但遗憾的是文本仍然落在图标下面。 - Joneskvist

Answer 1

只需在图像后面，在链接内添加一个标签... 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;}

- Waxi

---

请在CSS中确保i和span为display:inline-block。 - Waxi

你可能需要修改CSS，因为我之前使用过font-awesome，他们的图标默认是inline，而span也默认是inline，所以应该可以正常工作。如果它们换行了，那么说明包含元素的宽度强制执行了换行，或者i和span已更改默认设置。您应该包括相关的CSS，以便我们进行检查。 - Waxi

你可以添加一个ID，或者直接定位到fa-facebook类。 - Waxi

那个非常好，谢谢。您能修改上面的代码并为其指定一个特殊的ID并将其引用到CSS中以便我可以将其标记为答案吗？ - Joneskvist

@Joneskvist 已完成，不客气，很高兴它起作用了。 - Waxi

Answer 2

类似这样吗？

<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>中，它将可点击。如果在外部，它将不可点击。

- indubitablee

---

尝试过了，但由于某种奇怪的原因，文本显示不全。这一直是我的问题，我似乎无法解决它哈哈。 - Joneskvist

Answer 3

HTML

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

CSS

 div {
    float:left}

可以使用<hr>标签来插入分割线

- Waqar

---

不要鼓励人们使用浮点数...它们应该作为最后的选择。 - Waxi

我不确定如何实现你在我的问题中的答案，你能帮我吗？ - Joneskvist

好的，按照indubitablee所说的做。我也正要这样写，并使用<hr>来画线 ^-^ - Waqar