在图标旁边添加文字

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>

Answer 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>中，则可以点击。如果它在外面，它将不会

Answer 2

只需在图片后面的链接中添加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;}

Answer 3

<强> HTML

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

<强> CSS

 div {
    float:left}

行可以使用<hr>标记