Fixed [XF2.1] Some (brand?) type icons showing as blank squares with FA5

[marquisite]

Affected version

2.x/2.1

Currently, certain type icons for XFMG items are showing as blank squares instead of the expected icon. The example below with the missing icon is an embedded media item.


Reference: https://xenforo.com/community/media/users/chris-d.11388/

 

[marquisite]

The issue appears to be because .itemList-itemTypeIcon is loading the Font Awesome 5 Pro font-family, whereas for (most?) embedded media items (.itemList-itemTypeIcon--embed), the Font Awesome 5 Brands font is the one that is needed.

Provided that no embedded media types use regular FA5 icons, something as follows ought to fix this:

.itemList-itemTypeIcon.itemList-itemTypeIcon--embed {
    font-family: 'Font Awesome 5 Brands';
}

 

[Sami Jalal]

I can reproduce this!

 

[marquisite]

This also applies to the 'noThumb' thumbnail for embeds, as can be seen below (the missing icon is YouTube):

Media added by Kirk

xenforo.com

A similar css rule to my post above fixes this issue as well (again, provided that all .xfmgThumbnail--embed icons are brand icons)

.xfmgThumbnail--embed.xfmgThumbnail.xfmgThumbnail--noThumb .xfmgThumbnail-icon {
    font-family: 'Font Awesome 5 Brands';
}

 

[XF Bug Bot]

Thank you for reporting this issue. The issue is now resolved and we are aiming to include that in a future XFMG release (2.1.0 Preview 3).

Change log:

Use brand icons in XFMG as appropriate.

Any changes made as a result of this issue being resolved may not be rolled out here until later.