如何让登录按钮在用户登录时更改为图标 - How to I get the login button to change to an icon when a user is signed in?

在我的主页的标题中，我有一个登录按钮，可以打开一个模式并成功允许用户登录，但一旦用户登录，我希望现有的登录按钮更改为字形图标并保持字形图标，除非用户注销。怎么能做到这一点呢？P.S. 我正在使用Wordpress，Woocommerce和Twitter Bootstrap。

.HTML：

    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) : ?>
            <img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png">
            <!-- button trigger modal -->
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#signup" id="login-btn">LOG IN</button>
            <!-- Modal -->
            <div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <!-- modal Header -->
                        <div class="modal-header">
                            <img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png" class="login-logo" width="80" height="auto">
                            <button type="button" class="close"data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                                <span class="sr-only">Close</span>
                            </button>
                        </div>
                        <!-- modal body -->
                        <div class="modal-body">
                            <form role="form">
                                <div class="form-group">
                                    <input type="email" class="form-control" id="email" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" id="pwd" placeholder="Password">
                                </div>
                                <button type="submit" class="btn btn-default center-block" id="to-login">LOG IN</button>
                                <a href=""><p class="forgot-pass">Forgot password?</p></a>
                                <p class="signup">Don't have an account? Sign up quickly <a href="">here</a>.</p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        <?php else : ?>
            <img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png">
        <?php
        endif;
        $description = get_bloginfo( 'description', 'display' );
        if ( $description || is_customize_preview() ) : ?>
            <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
        <?php
        endif; ?>
    </div><!-- .site-branding -->

使用wordpress is_user_logged_in函数

在您的情况下，您可以使用这个

    <div class="site-branding">
    <?php
    if ( is_front_page() && is_home() ) : ?>
        <img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png">
        <!-- button trigger modal -->
        <?php if ( is_user_logged_in() ) { ?>
        <!----you icon here---->
        <?php } else { ?>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#signup" id="login-btn">LOG IN</button>
        <?php } ?>
        <!-- Modal -->
        <div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <!-- modal Header -->
                    <div class="modal-header">
                        <img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png" class="login-logo" width="80" height="auto">
                        <button type="button" class="close"data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                    </div>
                    <!-- modal body -->
                    <div class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <input type="email" class="form-control" id="email" placeholder="Email">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" id="pwd" placeholder="Password">
                            </div>
                            <button type="submit" class="btn btn-default center-block" id="to-login">LOG IN</button>
                            <a href=""><p class="forgot-pass">Forgot password?</p></a>
                            <p class="signup">Don't have an account? Sign up quickly <a href="">here</a>.</p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <?php else : ?>
        <img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png">
    <?php
    endif;
    $description = get_bloginfo( 'description', 'display' );
    if ( $description || is_customize_preview() ) : ?>
        <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
    <?php
    endif; ?>
</div><!-- .site-branding -->