XF 2.0 Fontawesome icons on help page?

Alien

Well-known member
Hey,

I'd like to customize the help page, with fontawesome icons for each selection.

How would I go about this on 2.0?

Thank you!
 
Do you want icons in the side navigation items? You can add font awesome to the page titles in the ACP, admin.php?help-pages/

I tested this out, and it will NOT allow you to edit Terms & Rules, Cookies, Smilies, Trophies, BBCodes, and others that come with XF 2. "Only a limited number of fields in this item can be edited".
 
Debug mode will let you edit them.

The problem with using this method, is you get a bunch of ugly code in your browser tabs for the help page you are on. You also get icons both on the help nav menu, AND on the right side description listing of the main help index.

Not a ideal solution, was hoping to be able to make it look like XF 1 could be configured, editing the help wrapper template. Is there no other way?

Thanks!
 
The problem with using this method, is you get a bunch of ugly code in your browser tabs for the help page you are on. You also get icons both on the help nav menu, AND on the right side description listing of the main help index.

Not a ideal solution, was hoping to be able to make it look like XF 1 could be configured, editing the help wrapper template. Is there no other way?

Thanks!

Suppose you could edit help_wrapper, add this bit:

Code:
item-{$page.page_id}

in the 2 bottom spots:, and help-links class to the top box.

Screenshot_6.webp

Then the CSS would look something like:

Code:
.help-links .blockLink
{
    &:before
    {
            content: "\f0e0";
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            margin-right: 5px;
    }
    &.item-smilies:before { content: "\f118"; }
    &.item-bb_codes:before { content: "\f040"; }
}
 
Last edited:
Suppose you could edit help_wrapper... <snip>

Ok I tested this code out, and it worked perfectly. Only downside, is that it ONLY has the icons appear on the help index. If you click any help selection, the icons vanish in the menu. So it would have to somehow carry over to each selection somehow and I have no idea how to do that. :)
 
Ok I tested this code out, and it worked perfectly. Only downside, is that it ONLY has the icons appear on the help index. If you click any help selection, the icons vanish in the menu. So it would have to somehow carry over to each selection somehow and I have no idea how to do that. :)

Edited my original post, should help.
 
Code:
.help-links .blockLink
{
    &:before
    {
            content: "\f0e0";
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            margin-right: 5px;
    }
    &.item-smilies:before { content: "\f118"; }
    &.item-bb_codes:before { content: "\f040"; }
}
Are you sure this code works?:)
 
Just a follow-up note that with the recent update to XF 2.0.10.0, the help_wrapper has changed...

This still works, but you'll just need to change one of the items in the original instructions...

Add:

Code:
item-{$page.page_id}

...once, at the following location:

help_wrapper_fix.webp
 
Just a follow-up note that with the recent update to XF 2.0.10.0, the help_wrapper has changed...
This still works, but you'll just need to change one of the items in the original instructions...
Add:
Code:
item-{$page.page_id}
...once, at the following location:
extra.less add;
CSS:
.p-body-sideNavContent a[href*="/yardim/ifadeler"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f118" }
.p-body-sideNavContent a[href*="/yardim/bb-kodlar"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f121" }
.p-body-sideNavContent a[href*="/yardim/oduller"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f091" }
.p-body-sideNavContent a[href*="/yardim/cerezler"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0c1" }
.p-body-sideNavContent a[href*="/yardim/kosullar"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f05a" }
.p-body-sideNavContent a[href*="/yardim/gizlilik"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f21b" }
.p-body-sideNavContent a[href*="/yardim/kaynak-kurallari"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f019" }
.p-body-sideNavContent a[href*="/yardim/kaynak-sartlari"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0a1" }
.p-body-content .block-textHeader a[href*="/yardim/ifadeler"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f118" }
.p-body-content .block-textHeader a[href*="/yardim/bb-kodlar"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f121" }
.p-body-content .block-textHeader a[href*="/yardim/oduller"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f091" }
.p-body-content .block-textHeader a[href*="/yardim/cerezler"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0c1" }
.p-body-content .block-textHeader a[href*="/yardim/kosullar"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f05a" }
.p-body-content .block-textHeader a[href*="/yardim/gizlilik"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f21b" }
.p-body-content .block-textHeader a[href*="/yardim/kaynak-kurallari"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f019" }
.p-body-content .block-textHeader a[href*="/yardim/kaynak-sartlari"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0a1" }

Use;
/yardim/ifadeler - /your/url change

Demo;
Adsız.webp
 
Top Bottom