Issue
I am trying to create a Link with glyphicon and I want my Icon and text to aligned in center. I tried with padding and marging both but it moves both the icon and text and I want to move text only. This is my code
.quick-links{
margin-left: 15px;
line-height: 2;
font-family: 'arial rounded MT';
border:1px solid;
}
.text-position{
display:inline-block;
font-size:18px;
padding:0px 0px 0px 5px;
margin: 0px 0px -15px 0px;
}
.quick-link-text a{
font-weight:500;
}
.quick-link-text a:hover{
text-decoration: none;
font-weight:1000;
}
.glyphicon-plus-sign{
font-size:24px;
}
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<div class="quick-links col-lg-4 col-md-4">
<h3>
Quick Links
</h3>
<div class="quick-link-text">
<a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> First Link</div></a>
</div>
<div class="quick-link-text">
<a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> Second Link</div></a>
</div>
</div>
Solution
.quick-links{
margin-left: 15px;
line-height: 2;
font-family: 'arial rounded MT';
border:1px solid;
}
.text-position{
display:inline-block;
font-size:18px;
padding:0px 0px 0px 5px;
margin: 0px 0px -15px 0px;
}
.quick-link-text a{
font-weight:500;
display: flex;
align-items: flex-start;
}
.quick-link-text a:hover{
text-decoration: none;
font-weight:1000;
}
.glyphicon-plus-sign{
font-size:24px;
}
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<div class="quick-links col-lg-4 col-md-4">
<h3>
Quick Links
</h3>
<div class="quick-link-text">
<a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> First Link</div></a>
</div>
<div class="quick-link-text">
<a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> Second Link</div></a>
</div>
</div>
Answered By - Majedul Hasan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.