Simple Machines Community Forum

I've added a new link that leads to my other website. I want to insert an image in front of it.How do I do that?

If you've created a new button in Subs.php, like this -


            'test' => array(
                'title' => 'Test',
                'href' => $scripturl . '?action=test',
                'show' => $context['allow_search'],
                'sub_buttons' => array(
                ),
            ),


You can add an image in index.css like this -


.main_icons.test::before {
    background-position: -31px -109px;
}


The main menu button images are loaded from -

  /Themes/default/images/icons/main_icons_sprite.png

You just have to get the coordinates right to select an image from the sprite.

I can't get an icon to appear in front of the link. I just can't get it to work. What am I doing wrong?

what have you done? without details on your side we cannot tell what may be doing wrong.

The icon should go before the Nova Villa link.

My site is:

https://nova-arcade.com/

The button code should like this in Subs.php -


'nova-villa' => array(
    'title' => 'Nova-Villa',
    'href' => 'https://nova-villa.de',
    'show' => true,
    'sub_buttons' => array(
    ),
),


You don't need any sub_buttons.

The image is added in index.css -


.main_icons.nova-villa::before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(https://nova-arcade.com/Themes/default/images/icons/arcade_games.png);
}



Looks like this, links to your phpBB forum -

   nova-villa_ss2.jpg

That's your arcade icon, you can replace it with a different one.

Still don't get an icon in front of Nova Villa.

that error suggests that either you screwed up the code -- or your host is having problems. WHat does your server-side error log show?

The error message is gone now. It's working again. I followed the instructions and still no icon is displayed in front of Nova Villa.

Clear your local cache.... it works find for me.

JUst went to your site and I see background: url(https://nova-arcade.com/Themes/ProCurve/images/icons/favicon4a.png); as the icon for that menu item

You've also messed up the placement of the image -


.main_icons.nova-villa::before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(https://nova-arcade.com/Themes/ProCurve/images/icons/favicon4a.png);
}


Should look like this -

   nova_ss3.jpg

Now it works. The only problem is that the icon is right next to the link. How can I change the distance to the link?

Add padding right

I did that, but unfortunately without success.

you may need to disable css minification and/or clear your cache to see the change.

CSS is correct, padding doesn't help.  I can't reproduce that positioning. 

Disable 'Minimize CSS' in Features and Options.

Well, the good news is I can reproduce the positioning in ProCurve theme.  :)

Bad news is, I can't fix it.  :(

Must be a conflict in the ProCurve css.  Maybe you can ask Twitch in theme support topic.

Ok, here's the conflict -


/* Font Awesome */
.main_icons, .icon {
    margin-inline-end: 0px;
//    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Awesome 6 Free";
}

.main_icons.nova-villa::before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(https://nova-arcade.com/Themes/ProCurve/images/icons/favicon4a.png);
}


When display: inline-flex; is removed, the nova-villa icon aligns correctly vertically.  Adding a space before 'title' in Subs.php moves it over a bit -


'nova-villa' => array(
    'title' => ' Nova-Villa',
    'href' => 'https://nova-villa.de',
    'show' => true,
    'sub_buttons' => array(
    ),
),


Removing inline-flex will probably break things elsewhere, you'd have to ask Twitch about that.  You can see it moves the other menu icons down a few px.

   nova_ss4.jpg

Well, this works, not sure why -


/* Font Awesome */
.main_icons, .icon {
    margin-inline-end: 0px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Awesome 6 Free";
}
.main_icons.nova-villa {
    display: inline-block;
}
.main_icons.nova-villa::before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(https://nova-arcade.com/Themes/ProCurve/images/icons/favicon4a.png);
}


Don't forget to add the space in Subs.php.

Even a blind pig occasionally finds a mushroom.

Clearing the forum cache didn't help either.

Did you try the code in my previous post?  Have you disabled minified css?

The icon displays correctly at https://nova-arcade.com/, you just have to add a space before title to position it a little further left -


'nova-villa' => array(
    'title' => ' Nova-Villa',
    'href' => 'https://nova-villa.de',
    'show' => true,
    'sub_buttons' => array(
    ),
),



I tried everything and nothing helped.

Vertical alignment is correct.  If you've added a space in 'title' and it doesn't work, try this -


    'title' => '&nbspNova-Villa',


Or you can try this -


.main_icons.nova-villa {
    display: inline-block;
    margin-right: 5px;
}



Now it worked. Thanks.

Quote from: Allach on May 20, 2025, 05:28:36 PMI've added a new link that leads to my other website. I want to insert an image in front of it.How do I do that?

How can I do this too like add links change links.

Read this topic from beginning.