Toggle icon on ID with before pseudo-element

Question

I want to change the hamburger icon of my menu to a close icon when clicked and vice versa.

It comes down to toggling: #nav-toggle-main:before to #nav-toggle-close:before

This is the CSS:

#nav-toggle-main:before {
float: left;
content: '\f0c9';
font-family: FontAwesome;
padding: 16px 10px;
}

#nav-toggle-close:before {
float: left;
content: '\xf00d';
font-family: FontAwesome;
padding: 16px 10px;
}

Looks impossible with toggleClass. Anyone have a solution?

As per this question (link), you cannot directly access the ppseudo classes rules... you can instead, append `styles=` to the div / or icon in your case...: http://stackoverflow.com/questions/10061414/changing-width-property-of-a-before-css-selector-using-jquery — mk117, Aug 30 '14 at 12:44

score 1 · Answer 1 · answered Aug 31 '14 at 07:17

1

In the end I managed through CSS by using:

.nav-open #nav-toggle-main:before{
content:'\f00d';
}

answered Aug 31 '14 at 07:17

sjoerdvh

11
3

score 0 · Answer 2 · answered Aug 30 '14 at 12:56

Try this:

$(document).ready(function(){

    $('head').append('<style>.burger2close:before{ content: "\xf00d"; !important;} .close2burger:before{ content: "\f0c9"; !important;}</style>');

    $('#nav-toggle-main').on('click', function(){
        $(this).toggleClass("burger2close close2burger");
        $('#nav-toggle-close').toggleClass('close2burger burger2close');
    });


    $('#nav-toggle-close').on('click', function(){
        $(this).toggleClass("close2burger burger2close");
        $('#nav-toggle-main').toggleClass('burger2close close2burger');
    });

});

Thanks for your solution. Probably it shoud work, but for some reason the style is not added to the head. Here you can see what I mean: http://prinstepaard.tk/ — sjoerdvh, Aug 30 '14 at 13:44

Toggle icon on ID with before pseudo-element

2 Answers2