html - How to centre font-awesome icons within <a> tag and disable link colour -
i want centre font-awesome within tag , disable blu colour far have not succeed in aim. in addition wish have icon bit larger maximum size supported in font-awesome 5x.
could please me out these issues thanks
to reproduce problem please visit link below 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; } #portfolio .portfolio-item .portfolio-link .caption { position: absolute; width: 100%; height: 100%; opacity: 0; background: #004dfa; -webkit-transition: ease .5s; -moz-transition: ease .5s; transition: ease .5s; } #portfolio .portfolio-item .portfolio-link .caption:hover { opacity: 0.9; } #portfolio .portfolio-item .portfolio-link .caption .caption-content { position: absolute; top: 50%; width: 100%; height: 20px; margin-top: -12px; text-align: center; font-size: 20px; color: #fff; } #portfolio .portfolio-item .portfolio-link .caption .caption-content { margin-top: -12px; } #portfolio .portfolio-item .portfolio-link .caption .caption-content h3, #portfolio .portfolio-item .portfolio-link .caption .caption-content h4 { margin: 0; } #portfolio * { z-index: 2; } @media(min-width:767px) { #portfolio .portfolio-item { margin: 0 0 30px; } } img.displayed { display: block; margin-left: auto; margin-right: auto }
find solution in fiddle: https://jsfiddle.net/z0vvpddf/2/
#portfolio .portfolio-item .portfolio-link .fa-home { display: block; text-align: center; color: #000; z-index: -1; }
Comments
Post a Comment