[Resolved] Changing and Editing .slideout-toggle Icon

Home Forums Support Changing and Editing .slideout-toggle Icon

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1266018
    Anthony

    I’m trying to change the Desktop Off-canvas Icon to a different one, and then also move it to :after, instead of :before.

    Here’s what I have so far:

    .slideout-toggle:not(.has-svg-icon) a:before {
    content: none!important;
    }

    .slideout-toggle:not(.has-svg-icon) a:after {
    content: ”;
    display: inline-block;
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    margin: 15px -25px 0 0; <<< this margin is adjusting the entire link not just the carrot icon
    background-image: url(‘../wp-content/uploads/2020/04/carrot-right-icon.svg’)!important;
    }

    I wanted to use a font awesome icon or something built in if I could so I could change the color when hovered over, but when I downloaded font awesome’s plugin and used the carrot icon, I got a weird BOX shape icon (which we’ve all seen before) and I couldn’t seem to get the carrot to display. I tried Customize > General > SVG Icons? Idk

    So I moved on to using my own SVG icon…

    Regardless of the icon’s origin, the problem I’m having is my client wants the carrot larger than the text itself but when I go to change the size of the carrot icon I cannot set the margin or line-height or anything else to bring it back inline with the word “explore”. For whatever reason when I add a margin to the Pseudo-Element it drags the entire word “Explore” with it, and not just the Carrot Icon.

    Any ideas if I’m working with the wrong thing here?

    Thanks!

    #1266853
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    .slideout-toggle {
        position: relative;
    }
    
    .slideout-toggle:not(.has-svg-icon) a::after {
        position: absolute;
        margin: 0 0 0 10px;
        top: calc(50% - 15px);
    }

    Let me know 🙂

    #1266868
    Anthony

    Brilliant.

    Thanks Tom!

    #1267721
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.