FontAwesome 5 : Some icons are not displayed in Webix

Webix JS
#1

Hi,

you didn’t notice any weird behavior with Fontawesome 5 in Webix?

I followed these guidelines:

https://forum.webix.com/discussion/32371/webix-5-3-font-awesome-5-0-10

https://docs.webix.com/desktop__skins.html#customfonticonpacks

It works well for some icons, but not for others, new ones I get the impression. I’ve done many tests, but some icons refuse to display in webix, even though they display perfectly in the rest of my application.

These icons for example:

fal fa-usd-square (f2e9)

far fa-file-invoice-dollar (f571)

See screenshot :

Anybody got an explanation? It’s frustrating.

Thank you,

Olivier

#2

can you provide a snippet?
use this one as the base.
https://snippet.webix.com/9nbujdt8

#3

I think the problem is in the explicitly set style “font-family: FontAwesome;”

#4

Thank you Integral! Here’s the snippet.

https://snippet.webix.com/0uejgpwt

With the same code, some icons are displayed, others are not. Outside webix, they are all displayed.

#5

New snippet, with and without the “font-family: FontAwesome;”, but it doesn’t change anything.

https://snippet.webix.com/5bkkgfip

I also put a more recent version of FontAwesome.

The problem on the snippet is that I don’t know if we can load this line <script>webix_skin_icon = "fal fa-";</script> before webix.js

#6

I also tried with style="font-family: 'Font Awesome 5 Pro';" (the font name in the css file), but that doesn’t change anything.

#7

Hi Olivier,

Please check the following sample: https://snippet.webix.com/ogwadsdz

  • You needn’t set any particular Font family: .fa, .fal or .far will do it.
  • the CSS class is .webix_icon, not .webix_skin_icon: it adds width and the icons become visible.
  • … and yep, your second sample is more correct as it loads FA Pro icons :smile:

Also, in the snippet tool, the webix_skin_icon = “” line does nothing as it should be placed before webix scripts are included, and tool does it beforehand.

#8

pay attention to load proper css file version.

#9

As to the webix_skin_icon marker: it makes sense for Webix controls that allow setting icons by names. For instance, you set:

webix_skin_icon = "far fa-";
...
{ view:"search", icon:"usd-square"}

Then the search field will draw the “far fa-usd-square” icon.

For HTML elements like spans you just provide the full icon name as its class name - and it goes.

#10

Thank you very much Intregal and Helga! Indeed, it is my fault. Everything works fine, sorry for your lost time…

For those who still have problems: be careful not to use this snippet on Safari. On Mac, use Chrome instead. In the latest version of Fontawesome, there is now a folder to download for the desktop, and another for the web. In the web version, be careful to use the file “all.css” and not “fontawesome.css”.

Translated with DeepL Translate: The world's most accurate translator