Two different icons for open/hide the sidebar

[cunda81]

Hello,

I would like to replace the icon in the topbar with two different icons.

For opening the sidebar a 'fa-arrow-right'.
To hide the sidebar a 'fa-arrow-left'.

How can I solve it most elegantly?

Thanks in advance.

[cunda81]

i can change the color, if is active or not

.wrapper .topbar #omega-menu-button {
color: yellow;
}

.wrapper .topbar #omega-menu-button.active {
color: red;
}

but i want change the icon too...

[cunda81]

my solution (actually, works):

topbar.xhtml

Code: Select all

        <a id="omega-menu-button" href="#">
            <span class="fa fa-arrow-right"></span>
            <span class="fa fa-arrow-left"></span>
        </a>

css:

Code: Select all

.wrapper .topbar #omega-menu-button.active .fa-arrow-right {
     display: inline;
}

.wrapper .topbar #omega-menu-button .fa-arrow-right {
     display: none;
}

.wrapper .topbar #omega-menu-button.active .fa-arrow-left {
     display: none;
}

.wrapper .topbar #omega-menu-button .fa-arrow-left {
     display: inline;
}

[mert.sincan]

Good solution! +1 Thanks for the update!