Search code examples
font-awesomefont-awesome-5

How to resize icons using the svg framework

I got Font Awesome 5 to work using:

<i class="fa fa-user"></i>
<script src="/js/packs/solid.js"></script>
<script src="/js/fontawesome.js"></script>

But styling the i tag didn't have any effect. So I tried using a web-font instead:

<link rel="stylesheet" href="css/font-awesome-core.css">
<link rel="stylesheet" href="css/font-awesome-solid.css">
<i class="fas fa-user"></i>

and it worked. But shouldn't I be using the svg framework? I'm not a Font Awesome traditionalist. Can you style fonts with different colors, sizes and rotations?

Solution

  • The FontAwesome5 SVG framework converts the tag into the fully rendered SVG code in the source.

    The styling of the icon/SVG can be controlled by styling the parent.

    <div style="font-size: 200%; color: red">
<i class="fas fa-user"></i>
</div>

    This will render the icon at 2x size and in red.