XF 2.0 Fontawesome icons on help page?

[Alien]

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!

 

[Alien]

extra.less add;

.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;
View attachment 184529

So this adds the icons to the right content box as well basically?

 

[Emre]

So this adds the icons to the right content box as well basically?

No. URL edit: a[href*="/yardim/kaynak-sartlari"] - a[href*="/help/your-url"]

 

[Painbaker]

So, if you want to add an icon directly to the list of help pages, here is my paid add-on:

[XB] Help Page Icon

Add visual flair to your help pages with icons! Features 🎨 FontAwesome & Image Support Use FontAwesome icons or upload custom images for help page icons. ✨ Custom Styling Choose icon colors and style them with custom CSS. Make your help pages...

xenforo.com