Font awesome <svg> size - css

Question

So I want to make this circles with icons in it, and for the icons I want to use font awesome. For the circles I use a padding trick so the circles are always circles and not ellipses.
The icons get way too big and when removing box-sizing: border-box way too small.
I think the padding-top: 20%; is the cause of the problem but I don't know how to fix this.
svg{
width: 20% !important;
padding-top: 20%;
margin-right: 20%;
border-radius: 100%;
background-color: #ec567c;
float: left;
box-sizing: border-box;
}
svg:last-of-type{
margin-right: 0;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<i class="fas fa-female"></i>
<i class="fas fa-music"></i>
<i class="fas fa-camera"></i>
If you take away the box-sizing: border-box; the icons will in the circle, but they will be way to small .

Answer 1

Font Awesome is - as the name says - a font.
That means you can change the size with font-size.
If you think the icon is too big: lower the font size.
If you think the icon is too small: crank that font size up.

Answer 2

There is an attribute you can add to the icon to make it bigger smaller than it's default. At the time of writing the Fontawesome docs are down though so I can't get it right now... that's the best way to go about it in my opinion.
EDIT:
OK so it's data-fa-transform="shrink-6" for making smaller. I believe you can increase the size with data-fa-transform="shrink--6"
Hello
<span class="fa-layers fa-fw">
<i class="fas fa-circle" data-fa-transform="shrink--6"></i>
<i class="far fa-calendar-alt fa-inverse" data-fa-transform="shrink-6"></i>
</span>
World
https://jsfiddle.net/vk3qw09f/395/
Adding the following JS before you load the Fontawesome JS will wrap the svg in tags. I'd suggest you do this and style the i tags rather than the svg.
FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};

Answer 3

According to the official documentation about power transforms you can simply add data-fa-transform="grow-6" to your icon element. It should work exactly the same as the hack using data-fa-transform="shrink--6".
Edit: not sure if it applies to SVG icons as well, looks like only to icon fonts. Using Angular 7.2.12 with #fortawesome/angular-fontawesome (0.3.0), #fortawesome/fontawesome-svg-core (1.2.17), #fortawesome/free-brands-svg-icons (5.8.1) and data-fa-transform="ANYTHING" doesn't work for me.
Solved this problem for my project using <fa-icon style="font-size: 2rem;" [icon]="['fab', 'facebook-f']"></fa-icon>.