Font Awesome Icons in Sidebar too large

[tylkomat]

Here you see a comparison of the default nebular icons and a font awesome icon in the sidebar.

Where do I have to put my CSS to fix this? I could also help with a pull request.

[weijyewang]

@tylkomat I just overwrite the styling by adding this to style.scss:

.nb-theme-default nb-menu .menu-item .menu-icon.fa {
  font-size: 2rem;
}

[nain1-look]

not working

[weijyewang]

@nain1-look I tried it on the older version. Are you using the latest version?

[shadabk92]

@nain1-look I tried it on the older version. Are you using the latest version?
Hey @weijyewang
yes, angular 7 version, latest version

[shadabk92]

[shadabk92]

@nain1-look I tried it on the older version. Are you using the latest version?

.nb-theme-corporate nb-menu .menu-item .menu-icon.fa {
  font-size: 1.5rem;
}

I tried this, its still not working

[weijyewang]

@shadabk92 I was talking about nebula version and ngx-admin version. I'm using Angular 7 as well. My solutions above was tested with nebular 2.0.0-rc.6, pretty old version

If you installed the newer ngx-admin recently you would have to inspect the element and overwrites the styling using your own selector

[shadabk92]

@shadabk92 I was talking about nebula version and ngx-admin version. I'm using Angular 7 as well. My solutions above was tested with nebular 2.0.0-rc.6, pretty old version

If you installed the newer ngx-admin recently you would have to inspect the element and overwrites the styling using your own selector

So what is the fix for this, I am actually deploying it for some production work
I tried a !important tag as well, it didnt work

[shadabk92]

It worked with 3.4.2, I added the style hack fix in
app/@theme/styles/styles.scss

.nb-theme-corporate nb-menu .menu-item .menu-icon.fa {
font-size: 1.5rem;
}

[jconradi]

Worked for me. Thanks.

I am using the cosmic theme and a newer version of font awesome so I used:

.nb-theme-cosmic nb-menu .menu-item .menu-icon.fas {
font-size: 1.5rem;
}