CODEWITHSUNDEEP
cssfont-awesome
Jeremy
Jeremy

Reputation: 1384

Font awesome <svg> size

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 .

Upvotes: 6

Views: 14119

Answers (3)

Daniel Danielecki
Daniel Danielecki

Reputation: 10512

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>.

Upvotes: 0

Tom
Tom

Reputation: 12998

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

Upvotes: 4

razemauze
razemauze

Reputation: 2676

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.

Upvotes: 6

Related Questions