Menu
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>
660
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.
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.
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.
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.
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/
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
