PDA

View Full Version : Using "solid" versions of Font-Awesom font icons



pauldugas
11 Jan 2020, 9:15 AM
I'm trying specifically to use Font Awesome's "expand-alt" icon.

iconCls: 'x-fa fa-expand-alt',

I know I need to add "fas" somewhere in there but all the combinations I've tried aren't working.

Any guidance?

rrandymeyer
13 Jan 2020, 9:12 AM
Hi @pauldugas,

I don't think it's you. I just tried using the expand-alt in ExtJS 7.0.0.156 and it was not showing, expand and expand-arrows-alt both work fine.

-Rudy

dawesi
14 Jan 2020, 5:24 AM
search the forums, you'll have to generate a whole new set of icons into a package then use that package.

just search for font-awesome-5 pro and you'll find them.... extjs only has free versions.

pauldugas
14 Jan 2020, 9:06 AM
https://fontawesome.com/icons?d=gallery&q=expand&m=free

expand-alt appears to be part of the free set

aicgroup-dev
15 Jan 2020, 7:33 AM
Hi Paul,

are you sure your application has set some kind of prefix (x-fa) ? try it without, then
fas fa-expand-alt should work.

pauldugas
22 Jan 2020, 7:33 AM
I agree that is "should" work :) Sadly, doesn't for me.

pauldugas
22 Jan 2020, 7:45 AM
node_modules/@sencha/ext-font-awesome/sass/src/all.scss looks like it's defining x-fa along with x-fas, x-far and x-fab classes. I see -expand and -expand-arrows-alt in node_modules/@sencha/ext-font-awesome/sass/etc/_icons.scss but not -expand-alt. Looks to me like it was just missed.

MadisonWisconsin
22 Jan 2020, 10:25 AM
I can't get your icon to work either. :-/

Your icon's syntax is here:
https://fontawesome.com/icons/expand-alt?style=solid

But in my stand-alone test (not using ExtJS), it isn't showing up!

Here are the rules for prefixes.
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

Here's a little Fiddle showing what they look like in ExtJS.
https://fiddle.sencha.com/#view/editor&fiddle/32tk

pauldugas
22 Jan 2020, 10:35 AM
Yes, "fa-expand-alt" is listed as one of the "fas" icons in your fiddle but the corresponding class isn't included in the ext-font-awesome package.

MadisonWisconsin
22 Jan 2020, 10:50 AM
Yes, "fa-expand-alt" is listed as one of the "fas" icons in your fiddle but the corresponding class isn't included in the ext-font-awesome package.


I did a stand-alone test too -- not using ExtJS at all -- and it didn't show up there either. This looks like an issue with fontawesome itself.

wemerson.januario
24 Jan 2020, 10:13 AM
Ext JS 7.1.x uses fontawesome 5.6.3 version. The fa-expand-alt was added on 5.12.x version.

Gonna ask Sencha to uptade fontawesome to latest


5.6.3
https://github.com/FortAwesome/Font-Awesome/blob/5.6.3/scss/_variables.scss

5.12.0
https://github.com/FortAwesome/Font-Awesome/blob/5.12.0/scss/_variables.scss

wemerson.januario
24 Jan 2020, 10:56 AM
this should help you creating your own font-awesome-5xx

https://jnesis.com/en/how-to-take-advantage-of-font-awesome-5-in-your-ext-js-6-applications/

pauldugas
24 Jan 2020, 11:12 AM
Excellent! Happy to see it's not just some kind mistake.