[Support request] Only icon in main navigation menu

Home Forums Support [Support request] Only icon in main navigation menu

Home Forums Support Only icon in main navigation menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2049153
    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.

    https://www.dropbox.com/s/45iy1i65fe0uxiu/Screenshot_2.png?dl=0

    It is posible?

    Thanks

    #2049262
    Ying
    Staff
    Customer Support

    Hi Carlos,

    Can you link us to your site?

    And how did you add the icon?

    Let me know πŸ™‚

    #2049329
    carlos

    Hi Ying!

    https://definitivo.safegest.com/

    https://www.dropbox.com/s/pcccdsu2uref6w4/Screenshot_5.png?dl=0

    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…

    πŸ˜‰

    #2049384
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #2049407
    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&#8217;);
    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&#8217;);
    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.

    πŸ˜‰

    #2049415
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #2049435
    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

    #2049439
    Elvin
    Staff
    Customer Support

    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. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.