Fontawesome sizes

[SchoonhovenOntwerpStudio]

Hello, I’m trying to figure out how I can change the Fontawesome sizes, since I couldn’t find any answers on the forum I decided to start a new topic.

I used the following code: <i class="x-icon x-icon-arrow-alt-circle-left" data-x-icon-o="&#xf359;" aria-hidden="true"></i>
So where can I put the code for size adjustments. Sorry if I ask a very simple question I just couldn’t figure it out by myself.

Thanks in advance.

[paul.r]

Hi,

You can add an inline style to your icon code

<i style="font-size:30px;" class="x-icon x-icon-arrow-alt-circle-left" data-x-icon-o="&#xf359;" aria-hidden="true"></i>

Change 30px to adjust

In case you want to learn some css you may refer to the link below

https://www.w3schools.com/css/css_howto.asp

Thanks

[SchoonhovenOntwerpStudio]

Thanks for that, so easy. But yes my css skills are quite bad, always good to learn something new.

[mldarshana]

Hi There,

Glad it helps.

FYI, you can also assign a CSS unique CSS class to your element my-custom-icon

class="x-icon x-icon-arrow-alt-circle-left my-custom-icon"

Then you can add a custom CSS rule into your X -> Theme Options -> CSS area.

.my-custom-icon{
  font-size:30px;
}

In this way, if you want to change font sizes on several icons at once, you just need to edit the custom CSS rule.

Cheers!