font awesome icon is getting cut off on the left hand side.
Snapshot
Below is my code
<div class="media-left">
<i class="fa fa-search fa-5x text-white"></i>
</div>
Css
.media-left{
display: table-cell;
vertical-align: top;
}
.text-white {
color: #fff;
}
.fa-5x {
font-size: 5em;
}
There is the main restriction of font icons: it should be used only with specific font sizes for avoiding artifacts https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
As mentioned @Dmitro it might help if you are using not guaranteed font sizes or using dynamic scaling of your content
letter-spacing: 1px;
Also additionally next CSS adjustment might help too :
transform: rotate(0.03deg);