Bootstrap navbar with element on right and left side beside menu icon

Question

I'm trying to build a navbar with bootstrap. My navbar should have two elements:

1. Close-icon on the left side of the bar
2. Label element on the right side of the bar, but it should be placed left to the menu-icon (which is shown on small devices). If there is no menu-icon, the label element should be just on the right side of the bar

This is what I tried so far:

JSFiddle : http://jsfiddle.net/0jejx693/1/

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <ul class="nav navbar-nav nav-pills navbar-right">
                <li><a class="navbar-brand"><i class="fa fa-power-off"></i></a></li>
                <li>
                <a href="/link">
                    <span class="label"><i class="fa fa-commenting"></i> 10</span>
                </a>
            </li>
            </ul>
        </div>

    </div>
</nav>

So the result should look like this:

small

| [icon]                                    [lable] [menu] |

big

| [icon]                                           [lable] |

Answer 1

Something like this?

  <nav id="mainNav" class="navbar navbar-default navbar-fixed-top affix-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top"><i class="fa fa-power-off"></i></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                                <a href="/link">
                                            <span class="label"><i class="fa fa-commenting"></i> 10</span>
                                        </a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

Answer 2

Updated fiddle. Hmm, sry cause I deleted "label" class from span, but it was not showing the "fa" icon. So, was only for test. And, there's a label left to toggle-menu. I think that's what you want, am I right?

http://jsfiddle.net/kqemk0zk/

.label-cont{
  position: absolute!important; /*Important used only to example. Could be overrated with hierarchy*/
  right: 60px;
}