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

Question

我有一个切换按钮，它使用栏 Font Awesome 图标，我正在使用 :after pseudo class 在栏的左侧添加一个左插入符号。当我单击该按钮时，我希望左边的插入符号消失，并在栏的右侧出现一个右边的插入符号。在 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

我不知道你的 fiddle 中发生了什么以及你最初是如何设置 .fa-bars 的，但我会 add/takeaway CSS 类 jQuery 逻辑。我重写了你的#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'？我不是当然）。

Answer 2

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

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/

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

Button Toggle using :before :after with Font Awesome Icons

css

jquery

button

pseudo-class

font-awesome