smile ikonun eni daralmıyor

Arkadaşlar fotoda gördügünüz gibi fotonun koşesine icon koymaya çalıştım. İkonu boyutlandırırken eni daralıyor ama boyu kısalmıyor engelleyen nedir anlamadım?
aşagıya fotonun bulundugu card kodlarını ekliyorum ve style kodunuda ekliyorum

.icon{
	position: absolute;
	width: 35px;
	height: 10px !important;
}

 <div class="card border-0">
                <div class="row">
                 <img class="icon"  src="happy.png">
                <img  class="card-img-left" src="1a.jpg" alt="haber resmi">
                <div class="col-md-6">
                  <div class="card-block">
                    <h5 class="card-tittle text-left">Minecraft Efsanaler Arasında</h5>
                    <p class="card-text text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    
                      .</p>

                      <i class="fab fa-facebook-f fab1"><span style="color:black;">1.1b</span> </i><i class="fab fa-whatsapp ml-2 fab2 "> <span style="color:black;">980</span></i>
                      <span class="text-muted ml-2" style="color:black;">21/08/2018</span>
                  </div>
                </div>
              </div></div>

<i class="fab fa-facebook-f fab1"> bunu küçülteceksen

i{

height: 10px; bunu dener misin css 'e

}