IPS Suite How to add Font Awesome icons to user menu in IPS

[Haim]

Hello. Today I will describe a short guide on how to add Font Awesome icons to the user's flyout menu in Invision Community (IPS Community Suite).

I think the effect is so satisfactory that everyone should add these icons to the menu. In my opinion, the user menu looks much clearer.

The version of the script on which I added the icons is IPS 4.2. I will only note that in newer versions the code may not work 100% correctly, or not work at all due to changes in the code that may appear in upcoming releases.

If the code does not work on your version of the software, let me know in the topic and I will try to improve it.

Font Awesome in the user menu
To add icons to the menu, go to ACP → Appearance → Styles and Templates → Edit HTML and CSS → CSS tab → custom → custom.css.

Now paste the following CSS code into the file:

/* Panel użytkownika */
#elUserLink_menu a:before {
    font-family: "FontAwesome";
    font-size: 14px;
    font-weight: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
      line-height: 1;
}
#elUserLink_menu a[href*="admin"] i {
  display: none;
}
#elUserLink_menu a:before {
  display: inline-block;
  width: 20px;
  opacity: 0.7;
}
#elUserLink_menu a:hover:before {
  opacity: 1;
}
/* Profil */
#elUserLink_menu > li[data-menuItem='profile'] > a:before {
  content: "\f007";
}
/* Moje załączniki */
#elUserLink_menu > li[data-menuItem='attachments'] > a:before {
  content: "\f0c6";
}
/* Obserwowana zawartość */
#elUserLink_menu > li[data-menuItem='manageFollowed'] > a:before {
  content: "\f06e";
}
/* Ustawienia konta */
#elUserLink_menu > li[data-menuItem='settings'] > a:before {
  content: "\f013";
}
/* Ignorowani użytkownicy */
#elUserLink_menu > li[data-menuItem='ignoredUsers'] > a:before {
  content: "\f235";
}
/* Panel Moderatora */
#elUserLink_menu > li[data-menuItem='modcp'] > a:before {
  content: "\f132";
}
/* Panel Admina */
#elUserLink_menu > li[data-menuItem='admincp'] > a:before {
  content: "\f023";
  margin-right: -3px;
}
/* Wyloguj */
#elUserLink_menu > li[data-menuItem='signout'] > a:before {
  content: "\f08b";
}

Don't forget to save your changes by clicking the "Save" button.

Below I add the effect of what the user menu looks like with Font Awesome icons already added

Pretty cool eh? Let me know if it looks as good on you.