Insert image before the link in navbar

[Allach]

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

[Sir Osis of Liver]

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

Code Select Expand


            '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 -

Code Select Expand


.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.

[Allach]

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?

[Illori]

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

[Allach]

The icon should go before the Nova Villa link.

My site is:

https://nova-arcade.com/ [nofollow]

[Sir Osis of Liver]

The button code should like this in Subs.php -

Code Select Expand


'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 -

Code Select Expand


.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 -

   You cannot view this attachment.

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

[Allach]

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

[Kindred]

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

[Allach]

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.

[Kindred]

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

[Sir Osis of Liver]

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

Code Select Expand


.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 -

   You cannot view this attachment.

[Allach]

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?

[Kindred]

Add padding right

[Allach]

I did that, but unfortunately without success.

[Illori]

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

[Sir Osis of Liver]

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

Disable 'Minimize CSS' in Features and Options.

[Sir Osis of Liver]

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.

[Sir Osis of Liver]

Ok, here's the conflict -

Code Select Expand


/* 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 -

Code Select Expand


'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.

   You cannot view this attachment.

[Sir Osis of Liver]

Well, this works, not sure why -

Code Select Expand


/* 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.

[Allach]

Clearing the forum cache didn't help either.