Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: [chrisB] on December 11, 2022, 04:21:38 PM

Title: Menu Icons
Post by: [chrisB] on December 11, 2022, 04:21:38 PM
How do you change the menu icons?

Home | Search | Calendar | Members

I have searched various terms to try to find the answer to my question, so please keep this in mind. I haven't managed to find any posts or topics about this subject - it may be due to my search terms, but I did scroll through what I thought would find the answer.
Title: Re: Menu Icons
Post by: Diego Andrés on December 11, 2022, 04:24:29 PM
They are loaded from the css using background-image and positioning.
The image sprite is located in Themes/default/images/icons/main_icons_sprite.png and Themes/default/images/icons/main_icons_sprite_hd.png

You could also just overwrite them using css, and individual icons.
Title: Re: Menu Icons
Post by: [chrisB] on December 11, 2022, 04:27:05 PM
Would you be able to tell me how to overwrite them with CSS?
Title: Re: Menu Icons
Post by: Diego Andrés on December 11, 2022, 04:30:35 PM
It would be something like this.

.main_icons.icon_name::before {
    background-image: url(../images/icons/youricon.png);
    background-repeat: no-repeat;
    position: center;
}