Home Forums Community Forum Sliding Bar Icon

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.

Tagged: ,

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • ♥Jaylin
    Participant
    Post count: 5

    How do I change the sliding bar icon instead of a “+” to possible a text or a font awesome icon?

    pifoux
    Participant
    Post count: 3

    Hi,

    change .fusion-sb-toggle::after

    Marco

    pifoux
    Participant
    Post count: 3

    An example to change default icon (+) by a vertical text:

    
    .fusion-sb-toggle::after {
    content: 'G \A L \A O \A S \A S \A A \A I \A R \A E' !important;
    color: black !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    }
    
    .fusion-sliding-bar-position-right.fusion-sliding-bar-toggle-rectangle .fusion-sb-toggle {
        height: 180px !important;
    }
    
    .fusion-sliding-bar-toggle-rectangle .fusion-sb-toggle:hover {
        background-color: #f19020 !important;
    }
    
    hirsts
    Participant
    Post count: 1

    Thanks for this post, it was also what I was looking for.

    Is there a way to have text rotated -90 degrees so it bottom to top on its side ?

    Thanks

    forthartley
    Participant
    Post count: 3

    Hi!

    Please can you help me, i tried this css but nothing happens. I need button to say Book Now instead of the circle plus icon. Would be much appreciated.

    MrFord2
    Participant
    Post count: 2

    pifoux, thanks for that elegant solution. I have a question, if I’d like to change the text with an icon instead, how would I do that instead?

    Thanks

    DBuckwald
    Participant
    Post count: 3

    This is what I did to replace with a calendar icon
    .fusion-sb-toggle::after {
    content: ‘\f073’ !important;
    font-family: FontAwesome !important;
    }

    .fusion-sb-toggle {
    font-family: “FontAwesome” !important;
    font-weight: 900 !important;
    }

    You can find the code for each icon here: https://fontawesome.com/icons?d=gallery&q=cal and just replace f073 with the icon that you want to use.

    DBuckwald
    Participant
    Post count: 3

    I also realized this did not work on all pages however when I installed Better Font Awesome plugin it worked everywhere.

    Zuuse
    Participant
    Post count: 2

    Hi, were these changes made in the actual .css file, or can they be made in the ‘additional css’ section? (It’s not working for me)

    Zuuse
    Participant
    Post count: 2

    Never mind. I just worked out that the above code doesn’t work if the icon is in the main menu.

    stephtripot
    Participant
    Post count: 2

    Hi,
    I hade the same problem but I juste found out:
    When you copy/paste the code from this page, quotes (“_” and ‘_’) are uncorrect.
    Try to rewriter the quotes with your keyboard.

    [sorry for my bad english]

    pmagony
    Participant
    Post count: 5

    Is it possible to just create a main menu link that triggers the sidebar, rather than having to alter the existing icon?

    goannawebsites
    Participant
    Post count: 30

    is there any update on the last question…is it possible to create a main menu item that trigger the sliding bar rather than having the “+” icon?

    Steebin
    Participant
    Post count: 1

    Im looking for this option as well

    keithroby
    Participant
    Post count: 1

    I’m also looking for this option!

Viewing 15 posts - 1 through 15 (of 16 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.