Font awesome <svg> size

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'
};