CODEWITHSUNDEEP
html
Joneskvist
Joneskvist

Reputation: 137

Add text next to icon

How can I insert a text right to the icon (see picture)?

I have this code which ads a facebook icon:

 <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

Upvotes: 3

Views: 27073

Answers (4)

Tommy Wolfheart
Tommy Wolfheart

Reputation: 592

Flexbox is excellent for this. It's very widely supported now:

<!-- HTML -->
<div class="icon-and-text">
  <i class="fa fa-facebook"></i>
  <p>Text here</p>
</div>

/* CSS */
.icon-and-text {
  display: flex;
  align-items: center; /* to align icon and text vertically */
}

Upvotes: 0

Waxi
Waxi

Reputation: 1651

Just add a span tag after the image, within the link...

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

Upvotes: 4

indubitablee
indubitablee

Reputation: 8216

Something like this?

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

you can place the text in two areas, inside the <a></a> tags or outside them. if its in the <a>, itll be clickable. if its outside, it will not

Upvotes: 1

Waqar
Waqar

Reputation: 848

HTML

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

CSS

 div {
    float:left}

line can be put by using <hr> tag

Upvotes: 0

Related Questions