CODEWITHSUNDEEP
htmlcssangular
Mason
Mason

Reputation: 303

Change height of svg icon fa-edit on angular project

What i need to is to edit the height of the icon to 1.5em instead of 1em. But i can't seem to find .svg-inline--fa. I don't have any CSS files for the icons cause i used npm install.

Commands that i run to download the svg icons on angular

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

Fortawesome: https://github.com/FortAwesome/Font-Awesome

enter image description here

<fa-icon [icon]="faEdit" size="lg" (click)="open(content)">Edit</fa-icon>

When i inspect element, this is the CSS of the icon

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em
}

Also imported import { faEdit } from '@fortawesome/free-solid-svg-icons'; to my component ts

Update: Use e.g. transform="down-5" to move the icon down.

Upvotes: 6

Views: 10315

Answers (4)

slimbofat
slimbofat

Reputation: 388

This might be a bit hackey, but I was able to fine-tune the icon size by changing the font size. This works because the icon size is proportional to the font size.

    <fa-icon [icon]="faYoutube" style="font-size:1.5em"></fa-icon>

Upvotes: 0

Elon Gomes Vieira
Elon Gomes Vieira

Reputation: 447

This worked for me.

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

<fa-icon [icon]="faYoutube" class="fa-2x"></fa-icon>

Upvotes: 2

Orhan U
Orhan U

Reputation: 101

Anyone searching the same thing:

In that documentation (mentioned by Shifenis) you can use size attribute

 <fa-icon [icon]="['fas', 'coffee']" size="6x"></fa-icon>

Simpler and more readable

Upvotes: 10

Shifenis
Shifenis

Reputation: 1125

You can just edit the size of you icon with transform in you html component.

Like this:

<fa-icon [icon]="['fas', 'coffee']" transform="shrink-9 right-4"></fa-icon>

Check fontawesome advanced usage

Upvotes: 11

Related Questions