更改网格系统中的字体大小

Question

I'm using the grid system to show 7 little images with a number next to each one of the images and it should be like this . In this first example i didn't use the grid system but it was much more complicated and it took me 60 - 120 minutes to do it and using the grid system i took less than 10 minutes BUT i can't resize the font. Have a look here

I tried overwriting any possible font-size attribute, and i also tried giving more classes to the divs and changing the font-size.

NOTE: I could easily change the font-family though.

 <div class="container" style="float: left; font-family: 'Germania One', cursive;"> <div class="row"> <div class="col"> <img src="forca.png" alt=""> 2 </div> <div class="col"> <img src="destreza.png" alt=""> 3 </div> <div class="col"> <img src="agilidade.png" alt=""> 2 </div> <div class="col"> <img src="inteligencia.png" alt=""> 8 </div> <div class="col"> <img src="resistencia.png" alt=""> 4 </div> <div class="col"> <img src="fe.png" alt=""> 2 </div> <div class="col"> <img src="carisma.png" alt=""> 4 </div> </div> </div>

Answer 1

 <div class="container" style="float: left; font-family: 'Germania One', cursive;"> <div class="row"> <div class="col"> <img src="forca.png" alt=""> <p style="font-size:2em">2</p> </div> <div class="col"> <img src="destreza.png" alt=""> <p style="font-size:2em">3</p> </div> <div class="col"> <img src="agilidade.png" alt=""> <p style="font-size:2em">2</p> </div> <div class="col"> <img src="inteligencia.png" alt=""> <p style="font-size:2em">8</p> </div> <div class="col"> <img src="resistencia.png" alt=""> <p style="font-size:2em">4</p> </div> <div class="col"> <img src="fe.png" alt=""> <p style="font-size:2em">2</p> </div> <div class="col"> <img src="carisma.png" alt=""> <p style="font-size:2em">4</p> </div> </div> </div>