How do I change FA icons from Sidenav, Navigation and Forums?

theRONiN

New member
Registered
Joined
Jun 5, 2021
Messages
4
Points
3

Reputation:

Hello, I want to change these icons to something else, I tried a few guides but none worked.
1625582202502.png
1625582219496.png
1625582249057.png


I have tried almost all guides from this and other forums, but they either remove the icon completely or just add a space after the icon.

Edit: I'm on Xenforo v2.2.5 and using Prisma with tons of theme changes, here's my board link: https://taggernation.com/x/
 

BattleKing

Spirit of darkness
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
Collaborate
Registered
Joined
May 24, 2020
Messages
3,497
Points
523

Reputation:

For the first one, you could set in extra.less the following:
Less:
.p-navEl-link:not(.mdi):not(.fa)[data-nav-id="forums"]:before,
.offCanvasMenu-link:not(.mdi):not(.fa)[data-nav-id="forums"]:before {
  content: "\F0161";
  display: inline-block;
  text-align: center;
}
.p-navEl-link:not(.mdi):not(.fa)[data-nav-id="whatsNew"]:before,
.offCanvasMenu-link:not(.mdi):not(.fa)[data-nav-id="whatsNew"]:before {
  content: "\F06D5";
  display: inline-block;
  text-align: center;
}
.p-navEl-link:not(.mdi):not(.fa)[data-nav-id="members"]:before,
.offCanvasMenu-link:not(.mdi):not(.fa)[data-nav-id="members"]:before {
  content: "\F000F";
  display: inline-block;
  text-align: center;
}
.p-navEl-link:not(.mdi):not(.fa)[data-nav-id="profile"]:before,
.offCanvasMenu-link:not(.mdi):not(.fa)[data-nav-id="profile"]:before {
  content: "\F0013";
  display: inline-block;
  text-align: center;
}
.p-navEl-link:not(.mdi):not(.fa)[data-nav-id="alerts"]:before,
.offCanvasMenu-link:not(.mdi):not(.fa)[data-nav-id="alerts"]:before {
  content: "\F009C";
  display: inline-block;
  text-align: center;
}
For the middle picuter you can set some classes
Forums > Node layout and styling > Edit node layout and styling:

1625584109600.png
 

BattleKing

Spirit of darkness
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
Collaborate
Registered
Joined
May 24, 2020
Messages
3,497
Points
523

Reputation:

if you want to use fontawesome icons you need to change the ICON FONT from Material Outline to Fontawesome
1625590472100.png
 

Xaviertemplates

New member
Registered
Joined
Mar 20, 2022
Messages
4
Points
1

Reputation:

Plz, help me also to change the icons I am not getting where to find these icons code. " content: "\F0161";"

My website https://rinovix.com/
 

Xaviertemplates

New member
Registered
Joined
Mar 20, 2022
Messages
4
Points
1

Reputation:

Rinovix.png


why there is no spin
 

Xaviertemplates

New member
Registered
Joined
Mar 20, 2022
Messages
4
Points
1

Reputation:

Rinovix (1).png


Is there any code to change these node icons without using any addons this is my site https://rinovix.com
 

BattleKing

Spirit of darkness
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
Collaborate
Registered
Joined
May 24, 2020
Messages
3,497
Points
523

Reputation:

Xaviertemplates

New member
Registered
Joined
Mar 20, 2022
Messages
4
Points
1

Reputation:

what is the way to find id of node
 

sushant

Member
Registered
Joined
Feb 23, 2022
Messages
7
Points
13

Reputation:

where can I find these material icon's content codes or font codes? when I try to use other code it is not working.
 
Last edited:

Ayon

[Developer]
Collaborate
Registered
Joined
Oct 18, 2019
Messages
250
Points
253

Reputation:

where can I find these material icon's content codes or font codes? when I try to use other code it is not working.
sushantI understand what your problem is
 
Top