Narendra Verma Narendra Verma - 1 month ago 9
CSS Question

How to display text left side and icon on right side in html css?

I have to display text left side and font awesome icon on the right side.Now I am getting all font awesome icon below of text.I think this may pretty simple, but still, I can not get it to work.Would you help me in this?



.top-contact-menu
{
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
}
.top-contact-menu h2
{
color: #fff;
font-size: 14px;
}
ul.address-top-menu
{
list-style: none;
}

ul.address-top-menu li
{
display: inline-block;
}

ul.address-top-menu li:after
{
content: '|';
color: #fff;
}

ul.address-top-menu li:last-child:after
{
content: ' ';
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>

<ul class="address-top-menu">
<li><i class="fa fa-phone"></i></li>
<li><i class="fa fa-envelope-o"></i></li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>

</div>




Answer

Use Float. It will help you to push content to extreme right.

.top-contact-menu
{
	background-color: #6aaf08;
	width: 100%;
	padding: 5px 0px;
}
.top-contact-menu h2
{
	color: #fff;
	font-size: 14px;
    display: inline-block;
}
ul.address-top-menu
{
	list-style: none;
    float: right;
    padding-right: 20px;
    vertical-align: top;
    margin-top: 10px;
}

ul.address-top-menu li
{
	display: inline-block;
}

ul.address-top-menu li:after
{
	content: '|';
	color: #fff;
}

ul.address-top-menu li:last-child:after
{
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="top-contact-menu">
	<h2>we are open:10am to 8pm</h2>

	<ul class="address-top-menu">
		<li><i class="fa fa-phone"></i></li>
		<li><i class="fa fa-envelope-o"></i></li>
		<li>
			<i class="fa fa-facebook"></i>
			<i class="fa fa-twitter"></i>
			<i class="fa fa-instagram"></i>
			<i class="fa fa-google-plus"></i>
		</li>
	</ul>

</div>