使用 :before :after 和 Font Awesome 图标的按钮切换

Question

我有一个使用条形字体真棒图标的切换按钮，我正在使用 :after 伪类将左插入符号添加到条形的左侧。当我单击按钮时，我希望左边的插入符号消失，而右侧的插入符号出现在条形的右侧。在One Codex Beta Site 上可以看到此功能的一个示例（在该站点上，它从条形右侧的右插入符号开始，而我从条形左侧的左插入符号开始）。

我已经在 Google 上寻求有关如何执行此操作的帮助，但我无法让它按我的意愿工作。任何想法将不胜感激。谢谢！

HTML

<div id="header" class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div id="logo" class="navbar-brand">
                    <button type="button" id="toggleSidebar">
                        <i class="navbar-icon fa fa-bars icon"></i>
                    </button><a href="index2.html" class="brand noline" title="Home">Brand</a></div>
            </div>
            <div class="collapse navbar-collapse" id="nav-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li id="nav-join"><a href="#" id="join" title="Join">Sign Up</a></li>
                    <li id="nav-signin"><a href="#" id="sign-in" title="Sign In">Sign In</a></li>
                    <li id="nav-about-us"><a href="#" id="about-us" title="About Us">About Us</a></li>
                </ul>
            </div>
        </div>
    </div>

JS

$(document).ready(function(){
            $.asm = {};
            $.asm.panels = 2;

            $('#toggleSidebar').click(function(){
                if ($.asm.panels === 1) {
                    $('#content').attr({'class': 'products col-lg-9'});
                    $('#sidebar').show();
                    $.asm.panels = 2;
                } else {
                    $('#content').attr({'class': 'col-lg-12'});
                    $('#sidebar').hide();
                    $.asm.panels = 1;
                }
            });
        });

CSS

.fa-bars:after {
  content: "\f0d9";
  float: left;
  padding-right: 5px;
}

#content {
    background-color: gray;
    padding: 0px;
    height: 100px;
}

这是我的JSFiddle

Answer 1

你需要添加一个类来重写图标的内容，即：

JS

$('#toggleSidebar').click(function(){
$(this).find('.navbar-icon').toggleClass('right');

CSS

.fa-bars.right::after {
content: "";
float: right;
padding-left: 5px;}

https://jsfiddle.net/5xtmapqp/

Answer 2

我不知道您最初设置 .fa-bars 的方式发生了什么，但我会在 jQuery 逻辑中添加/删除 CSS 类。我重写了你的#toggleSidebar.change 函数：

$('#toggleSidebar').click(function(){
            if ($.asm.panels === 1) {
                $('#content').attr({'class': 'products col-lg-9'});
                $('#sidebar').show();
                $('.fa-bars').removeClass('i-right-caret').addClass('i-left-caret');
                $.asm.panels = 2;
            } else {
                $('#content').attr({'class': 'col-lg-12'});
                $('#sidebar').hide();
                $('.fa-bars').removeClass('i-left-caret').addClass('i-right-caret');
                $.asm.panels = 1;
            }
        });

“i-right-caret”和“i-left-caret”是确定插入符号的字体很棒的类（我认为那里通常有一个“fa”？我不确定）。