Html 在图标旁边添加文本

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

我有这样一个代码，它在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>

HTML

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

行可以通过使用

标记这样的东西来放置

此处文本-不可使用链接单击

只需在链接中的图像后添加一个

span

标记即可

HTML:

---

你在看这个吗？我已经尝试过这个解决方案，但不幸的是，文本落在图标下。不要鼓励人们使用浮动…他们应该被用作最后手段。我不知道如何实现你对我问题的回答，你能帮我吗？好的，照无可置疑的说的做。我本打算这样写，并使用

---

作为第^-^行，但由于一些奇怪的原因，文本落在下面。这从一开始就是我的问题，我似乎无法解决它。哈哈，在CSS中确保

I

和

span

是

display:inline block

。您可能需要触摸CSS，因为我以前使用过字体awesome，它们的图标默认为inline，并且默认为inline，所以它应该可以正常工作。如果它们是换行的，那么这意味着您在包含元素上的宽度是强制的，或者

i

和

span

更改了默认值。您可能应该包括相关的CSS，以便我们检查。您可以添加ID，或者您可以只针对

fa facebook

类。如果您提供了您正在使用的实际html/CSS，那么我们实际上可以帮助您。我怎么知道你正确地实施了这些建议？花了3秒钟的时间才弄清楚你的问题是什么，我在之前的帖子中已经提到过。此类

col-sm-4

限制了侧边栏的宽度，因此文本甚至没有足够的空间放在同一行上。如果你改变了这一点，你会看到它的工作。

 div {
    float:left}

<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>

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