Add the fixed width feature to font awesome icons

Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.

https://blazorise.com/

Other

3.26k stars 529 forks source link

Add the fixed width feature to font awesome icons #3992

Open Jinjinov opened 2 years ago

Jinjinov commented 2 years ago

Is your feature request related to a problem? Please describe. Font awesome icons have different widths. This doesn't look good when using different icons in rows and columns, because they don't align.

Describe the solution you'd like Add FixedWidth to the Icon class, like the existing font awesome css class fa-fw

Additional context

.fa-fw {
    text-align: center;
    width: 1.25em;
}

stsrki commented 2 years ago

How would this work with different IconSize values? They can range from xs to lg, and from 2em to 10em. From what I can see fa-fw is fixed to 1.25em.

Jinjinov commented 2 years ago

Good point... right now I am using Class="fa-fw" and it works ok - I have eliminated the resizing when I switch from Name="IconName.Edit" to Name="IconName.Save".

Could this be done in any other way that would take all the different sizes into consideration?

All I want is that my UI doesn't resize when I hide the edit icon and show the save icon in its place.