Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to put float: right; Font Awesome icon on same line?

Tags:

html

css

In the code below after applying float: right; on i tag the Font Awesome icon arrow goes to the right but not on same line.

I want the arrow should be on same line like attached image.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<style type="text/css">

.content {
    display: block;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    width: 300px;
    padding: 0px 20px 0px 20px;
    border: 1px solid red;
}

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 40px;
}

i {
    float: right;
    color: green;
    display: inline-block;
}    

</style>
</head>
   <body>

   <a class="content" href="/United Arab Emrits">
       <div>National and world news with background material, activities, discussion starters and teaching guides.</div>
       <i class="fa fa-chevron-circle-right"></i>
   </a>

   </body>
</html>

In the code above the output should be like attached image.

like image 660
Syed Avatar asked Oct 11 '15 14:10

Syed


People also ask

How do I align font awesome icons to the right?

Pull Align-Right font awesome icon To the left To pull Align-Right icon to the right of the container use fa-pull-right class.

How do I align text and icons on the same line?

If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.

How do I put text and icons side by side?

display: To display text and icons side by side, we will use the display: flex property. float: To set the icon on the right side of the div, we use float: right property.

How do I combine font awesome icons?

To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect.


1 Answers

Your HTML ought to be like this and we can add line-height to the icon class:

 <a class="content" href="/United Arab Emrits">
   <i class="fa fa-chevron-circle-right my-icon"></i>
   <div>National and world news with background material, activities, discussion starters and teaching guides.
   </div>
</a>

and add this style to your CSS:

.my-icon{
  line-height:40px;
}

Working fiddle: http://jsfiddle.net/sandenay/L4pkc07e/2/

like image 139
Sandeep Nayak Avatar answered Oct 06 '22 18:10

Sandeep Nayak