Change size of individual Font Awesome icons?

[Flyer66]

I'm trying to change the size of individual FA icons but not having much luck. Any ideas? I need to change the size of individual icons.

Code: Select all

.fas.fa-refigerator {
color:#F1C300;
font-size: 80px !important;
font-family: 'Font Awesome 5 Pro', sans serif !important;
}

.far.fa-refigerator {
color:#fff;
font-size: 80px !important;
font-family: 'Font Awesome 5 Pro', sans serif !important;
}

[HansieNL]

The icons Dashticz is using are from the Free font. So you can't select the Pro icons.
For the free version icons you can change the size:

Code: Select all

.far.fa-lightbulb {
	font-size: 30px !important;
}

[Flyer66]

I've modified mine to use Pro. The icons display correctly but I'd like to change the font size so some blocks have a different size icon but I'm unable to figure out which CSS to change to achieve that.

The icons Dashticz is using are from the Free font. So you can't select the Pro icons.
For the free version icons you can change the size:

Code: Select all

.far.fa-lightbulb {
	font-size: 30px !important;
}

[Flyer66]

Attached is a screenshot which may help explain what I am trying to accomplish. Thank you in advance.

[Lokonli]

I'm trying to change the size of individual FA icons but not having much luck. Any ideas? I need to change the size of individual icons.

Code: Select all

.fas.fa-refigerator {
color:#F1C300;
font-size: 80px !important;
font-family: 'Font Awesome 5 Pro', sans serif !important;
}

.far.fa-refigerator {
color:#fff;
font-size: 80px !important;
font-family: 'Font Awesome 5 Pro', sans serif !important;
}

Did you try with 'fa-refrigerator' instead of 'fa-refigerator'?

[Flyer66]

Oops! Thank you for noticing that. It did not solve the problem but got me back on track.

I ended up using this to resolve the issue. I am terrible at CSS so I'm sure there is a better way to do this but it works for me needs. Thank you for your help!

Code: Select all

.fa-refrigerator:before{
font-size: 100px;
color:
}