How to Add an ICON for Custom Menu in Moodle

What is Moodle?

Moodle is a learning platform designed to provide educators, administrators, and learners with a single robust, secure and integrated system to create personalized learning environments.


Custom Menu with an icon

I was adding custom menu items in my Moodle website and suddenly I realized that I am not able to add an icon for that custom menu item. I searched on google a lot but I couldn’t find any perfect solution. Then I found a CSS trick to do it which I am sharing with you today.

icon for custom menu in Moodle


How to Add an ICON to Custom Menu Item in Moodle

  1. Go to Site Administrator – Appearance – Themes – Theme selection – (Your theme) – Custom css & js
  2. Add this CSS there.
    .navbar ul:nth-child(2) > li:nth-child(1) a:before {
    content: “\f19d”;
    font-family: FontAwesome;
    margin: 0 5px;



icon for custom menu in Moodle


If you still have any problem then just let me know in the comment section below.

Leave a Reply