[Support request] Only icon in main navigation menu

[carlos]

Hi!

In one of the items in my menu I only want the icon i dont want the word, only the suer icon and remover the word and if is posible without plugins.

It is posible?

Thanks

[Ying]

Hi Carlos,

Can you link us to your site?

And how did you add the icon?

Let me know 🙂

[carlos]

Hi Ying!

https://definitivo.safegest.com/

In the image you can see how I create the icon… with css.. but if I remove the word ” MI cuenta” the item is removed…

😉

[Elvin]

Hi Carlos,

Try adding this HTML as the label instead of the word “Mi Cuenta”.

<img height="20" width="20" src="https://definitivo.safegest.com/wp-content/uploads/2021/09/login-icon-orange.webp">

You then add this CSS instead of adding it as a background.

li.micuenta a {
    display: flex;
}

[carlos]

Thanks Elvin!

Now the icon is alone in menu item, but before i wa this code:

/*acceder icono*/
.micuenta {
background-image: url(‘https://definitivo.safegest.com/wp-content/uploads/2021/09/login-menu-icon.webp’);
background-repeat: no-repeat;
background-position: right;
padding-right: 0px;

}

.micuenta:hover {
background-image: url(‘https://definitivo.safegest.com/wp-content/uploads/2021/09/login-icon-orange.webp’);
background-repeat: no-repeat;
background-position: right;
padding-right: 0px;
}

Then when mouse was hover the icon, the icon change to orange color, but now, the icon no change color like other icons.

😉

[Elvin]

If you can convert the image into an SVG code, we can replace the with an <svg> and style its hover fill.

Or keep the label field completely empty and try this CSS instead:

/*acceder icono*/
.micuenta a {
    background-image: url('https://definitivo.safegest.com/wp-content/uploads/2021/09/login-menu-icon.webp');
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 0px;
    height: 20px;
}
    
.micuenta a:hover {
    background-image: url('https://definitivo.safegest.com/wp-content/uploads/2021/09/login-icon-orange.webp');
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 0px;
    height: 20px;
}

[carlos]

Thanks Elvi!

The svg option is the best because not found with the code removig the label.

How I can tranform the image to svg?

I see that with this tool is posible: https://photogramio.com/es/png-to-svg

[Elvin]

the icon is a webP so you’ll have to look for a working webP to SVG converter.

Alternatively, you can try just looking for a suitable icon that’s already in SVG and just copy it’s <svg> code to the menu item label field. 😀

[Author]

Posts