[Resolved] Changing and Editing .slideout-toggle Icon

Home Forums Support [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
  • #1266018

    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?


    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 ๐Ÿ™‚



    Thanks Tom!

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