CODEWITHSUNDEEP
htmlcssfont-awesome
user6216142
user6216142

Reputation:

Vertically aligning a FontAwesome Icon with text witnin an a-tag

What is the best way of vertically aligning a FontAwesome Icon to vertically align with the text in a, <a href> tag?

Here is the HTML along with the CSS I have so far.

Thanks.

.btn-tertiary{
	display: block;
	width: 100%;
	padding: 10px 7px 10px 10px;
	border: 2px #E0DDDD solid;
	margin-bottom: 10px;
	font-size: 15px;
	color: #0D0155;
	height: auto;
	font-weight: 600;
	letter-spacing: 1px;
	-webkit-transition:all 300ms ease-in-out;
    transition: color 0.3s ease 0s;
}
.btn-tertiary:hover{
	background-color: #004;
	color: white;
	text-decoration: none;
	border: solid 2px #004;
}
.btn-tertiary i{
	color: #E0DDDD!important;
	float: right!important;
	font-size:20px;
	height: 20px;
	vertical-align: middle;

}
<a class="btn-tertiary" title="Login to mange your investmnts & more" href="#">Login to my account<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>

Upvotes: 0

Views: 67

Answers (3)

Alex Zakruzhetskyi
Alex Zakruzhetskyi

Reputation: 1433

Use paddings for your i element. Or make a element position relative, and i position absolute. And then use top or bottom.

Upvotes: 1

Serg Chernata
Serg Chernata

Reputation: 12400

In this case, all you have to do is tweak line-height for the i element.

line-height: 17px;


*{box-sizing: border-box;}

.btn-tertiary{
	display: block;
	width: 100%;
	padding: 10px 7px 10px 10px;
	border: 2px #E0DDDD solid;
	margin-bottom: 10px;
	font-size: 15px;
	color: #0D0155;
	height: auto;
	font-weight: 600;
	letter-spacing: 1px;
	-webkit-transition:all 300ms ease-in-out;
    transition: color 0.3s ease 0s;
}
.btn-tertiary:hover{
	background-color: #004;
	color: white;
	text-decoration: none;
	border: solid 2px #004;
}
.btn-tertiary i{
	color: #E0DDDD!important;
	float: right!important;
	font-size:20px;
	/*height: 20px;*/
	vertical-align: middle;
    line-height: 17px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="btn-tertiary" title="Login to mange your investmnts & more" href="#">Login to my account<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16369

Easiest way is with a little extra markup:

<a class="foo">
  <span>The text you want to align</span>

  <i class="fa fa-check"></i>
</a>

Then add some CSS that will set vertical-align to middle for both span and i.

.foo span,
.foo i {
  display: inline-block;
  vertical-align: middle;
}

Obviously this is a contrived example, but you should be able to update your code based on it.

Upvotes: 0

Related Questions