XF 2.3 Icons not showing after update

mejmet

mejmet

New member
After updating to 2.3, icons are not visible in the forum. I looked at many sources but could not find a solution. What can I do about this?
 
Sort by date Sort by votes
The icon system has changed in 2.3. It looks like your style or customizations are outdated and will need updating.

You should use .m-faIcon to set icons in CSS. For example:

Less: 
.p-navEl-link[data-nav-id="home"]::before
{
    .m-faIcon(@fa-var-home);
}
 
Upvote 0 Downvote
Jeremy P said:
The icon system has changed in 2.3. It looks like your style or customizations are outdated and will need updating.

You should use .m-faIcon to set icons in CSS. For example:

Less: 
.p-navEl-link[data-nav-id="home"]::before
{
    .m-faIcon(@fa-var-home);
}
Click to expand...
Thank you, where do I add this?
 
Upvote 0 Downvote
Anywhere you've used CSS icons. That example is from your current extra.less which appears to use CSS content properties.

You'll also need to update any <i class="fa ..."></i> usages to use <xf:fa icon="..." />. You can see here for more details:

Chris D

XF 2.3 Post in thread 'Boosting performance in XenForo 2.3'

Font Awesome improvements​

On almost every page we serve currently, we include as many as five different variants of the Font Awesome 5 Pro icon library. That's up to 8,000 icons split across their different variations, but on any given page we actually use... a lot less than that. The file size of each of these fonts is up to 200KB with an additional 40KB worth of CSS.

We have always wanted to ship a much smaller subset of icons but when admins, style designers and add-on developers have the full suite of icons available to them, this can be a challenge. In particular, working with...
  • Like
  • Love
  • Wow
 
Upvote 0 Downvote
Jeremy P said:
Anywhere you've used CSS icons. That example is from your current extra.less which appears to use CSS content properties.

<i class="fa ..."></i> usages to use <xf:fa icon="..." />. You can see here for more details:

Chris D

XF 2.3 Post in thread 'Boosting performance in XenForo 2.3'

Font Awesome improvements​

On almost every page we serve currently, we include as many as five different variants of the Font Awesome 5 Pro icon library. That's up to 8,000 icons split across their different variations, but on any given page we actually use... a lot less than that. The file size of each of these fonts is up to 200KB with an additional 40KB worth of CSS.

We have always wanted to ship a much smaller subset of icons but when admins, style designers and add-on developers have the full suite of icons available to them, this can be a challenge. In particular, working with...
  • Like
  • Love
  • Wow
Click to expand...
Can I install the old version? Because I think it will be difficult this way..
 
Upvote 0 Downvote
The legacy icon approach is not compatible with 2.3, and both .m-faContent(@fa-var-name) and <xf:fa> were the recommended way to use icons in 2.1/2.2 and and would have continued to work in 2.3.

It should not be too difficult to switch over, and if you have any questions about it feel free to ask.

mejmet said:
I bought a theme. I don't know where to upload the codes...
Click to expand...
You should contact the style author for an updated version.
 
Upvote 0 Downvote
Jeremy P said:
The legacy icon approach is not compatible with 2.3, and both .m-faContent(@fa-var-name) and <xf:fa> were the recommended way to use icons in 2.1/2.2 and and would have continued to work in 2.3.

It should not be too difficult to switch over, and if you have any questions about it feel free to ask.


You should contact the style author for an updated version.
Click to expand...
I may get a late response from the theme maker. Can you tell me how I can add it?
 
Upvote 0 Downvote
You must edit the extra.less template and replace all of the content-based icons with .m-faIcon.

For example, you might see:
Less: 
.p-navEl-link[data-nav-id="home"]:before {
    content: '\f015';
}

You would need to look up the icon corresponding to the character, \f015, and replace it with the variable corresponding to its name, home:
Less: 
.p-navEl-link[data-nav-id="home"]:before {
    .m-faIcon(@fa-var-home);
}
 
Upvote 0 Downvote
The CSS shows that (or similar code) in extra.less, but it may be the result of inclusions from other files. You might try using the template search for data-nav-id="home" to see if you can identify the source.
 
Upvote 0 Downvote
You can search templates via Control panel > Appearance > Styles and templates > Search templates (admin.php?templates/search).

Though if the style is made for 2.2, then it will need updates for compatibility with 2.3 stretching far beyond icons. You will need to get an update from the creator, or use the default style in the meantime.
 
Upvote 0 Downvote
Jeremy P said:
Anywhere you've used CSS icons. That example is from your current extra.less which appears to use CSS content properties.

You'll also need to update any <i class="fa ..."></i> usages to use <xf:fa icon="..." />. You can see here for more details:

Chris D

XF 2.3 Post in thread 'Boosting performance in XenForo 2.3'

Font Awesome improvements​

On almost every page we serve currently, we include as many as five different variants of the Font Awesome 5 Pro icon library. That's up to 8,000 icons split across their different variations, but on any given page we actually use... a lot less than that. The file size of each of these fonts is up to 200KB with an additional 40KB worth of CSS.

We have always wanted to ship a much smaller subset of icons but when admins, style designers and add-on developers have the full suite of icons available to them, this can be a challenge. In particular, working with...
  • Like
  • Love
  • Wow
Click to expand...
Can you explain please how it works in Custom user fields? I had before:
Code: 
<a href="skype:{$valueUrl}?chat"><i class="fab fa-skype"></i></a>
Changed
Code: 
<a href="skype:{$valueUrl}?chat"><xf:fa icon="fab fa-skype" /></a>
Doesn't work :(
With simple text works fine.
 
Upvote 0 Downvote
The easiest solution for places which don't support XF template syntax (<xf:fa>) is to use the JS renderer:

HTML: 
<a href="skype:{$valueUrl}?chat">
    <i class="fa--xf fab fa-skype" title="Skype" data-xf-init="icon" data-lazy="false"><svg></svg></i>
</a>
 
Upvote 0 Downvote
Jeremy P said:
The easiest solution for places which don't support XF template syntax (<xf:fa>) is to use the JS renderer:

HTML: 
<a href="skype:{$valueUrl}?chat">
    <i class="fa--xf fab fa-skype" title="Skype" data-xf-init="icon" data-lazy="false"><svg></svg></i>
</a>
Click to expand...
Ahhh, I realized there is simply no support for Custom user fields. Thank you very much for the solution!
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Sonic Fan Games HQ
Fixed BBCode Font Awesome icons not showing while previewing post/thread
Replies
1
Views
79
XF Bug Bot
XF Bug Bot
W
  • Question Question
XF 2.3 Older Images Not Showing After Upgrade
Replies
3
Views
85
WiseTech
W
AndyB
Fixed Font Awesome icons not showing
2
Replies
27
Views
2K
Kier
Kier
digitalpoint
Fixed Node "sub-type" icons not always being used
Replies
1
Views
608
XF Bug Bot
XF Bug Bot
klamm
  • Question Question
XF 2.2 Reactions not showing after v2.2.6 Patch 2
Replies
2
Views
510
klamm
klamm
Back
Top Bottom