I've been trying to center an icon both horizontally and vertically inside a link using :before, but so far I haven't been successful.
Despite my numerous attempts, I can't figure out why the icon won't center.
Here's my HTML:
<ul>
<li class="item-1"><a href="">Search</a></li>
</ul>
And here's my CSS :
ul > li > a {
font-size:0;
border-radius: 50px;
text-align: center;
height: 50px;
width: 50px;
border: 2px solid #ccc;
}
ul > li > a:before {
font-family:"Glyphicons Halflings";
font-size: 40px;
line-height: 50px;
}
ul > li.item-1 > a:before {
content:"\2b";
}
Fiddle : https://jsfiddle.net/xmx4xcfc/
Just for your information, I'm using bootstrap.
Can someone point out what I'm missing?
(I'd like to avoid using position:absolute as suggested in Center a Pseudo Element, and if possible, use a simpler solution that doesn't involve heavy positioning...)