I have been trying to center a Font Awesome icon within an anchor tag and remove the blue color without success. I also want the icon to be slightly larger, but it seems that the maximum size supported by Font Awesome is 5x.
Can you please assist me with these issues? Thank you.
To see the problem in action, please visit the following link: https://jsfiddle.net/z0vvpddf/
HTML:
<div class="col-sm-4 portfolio-item ">
<a href="<c:url value='/'></c:url>" class="portfolio-link" data-toggle="modal">
<span class="caption">
<span class="caption-content">
<i>Wall</i>
</span>
</span>
<i class="fa fa-home fa-5x"></i>
</a>
</div>
CSS:
#portfolio .portfolio-item {
right: 0;
margin: 0 0 15px;
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
margin: 0 auto;
max-width: 400px;
}
/* Additional CSS rules... */