Selectbox řazení, bootstrap 3, ikony vpravo nebo vlevo

index.html

<div class="container">
<div class="row">
  <div class="col-md-4">
    <div style="position:absolute; left: -7.25ex; top: 7px;">Řadit podle: </div>
    <div class="dropdown">
      <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" 
              aria-haspopup="true" aria-expanded="true"><span>Číslo požadavku</span>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="dropdownMenu1">
        <li><a href="#">Od nejdůležitějších</a></li>
        <li><a href="#">Nejnovější komentáře</a></li>
        <li><a href="#">Nejdéle beze změny</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Číslo požadavku <i class="fa fa-fw fa-sort-numeric-desc"></i> </a></li>
        <li><a href="#">Číslo požadavku <i class="fa fa-fw fa-sort-numeric-asc"></i></a></li>
        <li><a href="#">Priorita - od nejvyšší <i class="fa fa-fw fa-sort-numeric-desc"></i> </a></li>
        <li><a href="#">Priorita - od nejnižší <i class="fa fa-fw fa-sort-numeric-asc"></i></a></li>
        <li><a href="#">Předmět <i class="fa fa-fw fa-sort-alpha-asc"></i> </a></li>
        <li><a href="#">Předmět <i class="fa fa-fw fa-sort-alpha-desc"></i> </a></li>
        <li><a href="#">Stav - od nových <i class="fa fa-fw fa-sort-amount-asc"></i> </a></li>
        <li><a href="#">Stav - od nejpokročilejších <i class="fa fa-fw fa-sort-amount-desc"></i></a></li>
        <li><a href="#">Termín - od nejbližších <i class="fa fa-fw fa-sort-numeric-asc"></i> </a></li>
        <li><a href="#">Termín - nejvzdálenější <i class="fa fa-fw fa-sort-numeric-desc"></i></a></li>
        <li><a href="#">Zadáno - nejnovější <i class="fa fa-fw fa-sort-numeric-desc"></i> </a></li>
        <li><a href="#">Zadáno - nejstarší <i class="fa fa-fw fa-sort-numeric-asc"></i></a></li>
      </ul>
    </div><!-- /dropdown -->
  </div><!-- /col -->
  
  
  <div class="col-md-4">
    <div style="position:absolute; left: -7.25ex; top: 7px;">Řadit podle: </div>
    <div class="dropdown">
      <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" 
              aria-haspopup="true" aria-expanded="true"><span>Číslo požadavku</span>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="dropdownMenu1">
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Od nejdůležitějších</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Nejnovější komentáře</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Nejdéle beze změny</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#"><i class="fa fa-check fa-fw tt-check-spacing0"></i>&ensp;Číslo požadavku <i class="fa fa-fw fa-sort-numeric-desc"></i> </a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Číslo požadavku <i class="fa fa-fw fa-sort-numeric-asc"></i></a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Priorita - od nejvyšší <i class="fa fa-fw fa-sort-numeric-desc"></i> </a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Priorita - od nejnižší <i class="fa fa-fw fa-sort-numeric-asc"></i></a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Předmět <i class="fa fa-fw fa-sort-alpha-asc"></i> </a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Předmět <i class="fa fa-fw fa-sort-alpha-desc"></i> </a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Stav - od nových <i class="fa fa-fw fa-sort-amount-asc"></i> </a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Stav - od nejpokročilejších <i class="fa fa-fw fa-sort-amount-desc"></i></a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Termín - od nejbližších <i class="fa fa-fw fa-sort-numeric-asc"></i> </a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Termín - nejvzdálenější <i class="fa fa-fw fa-sort-numeric-desc"></i></a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Zadáno - nejnovější <i class="fa fa-fw fa-sort-numeric-desc"></i> </a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing0"></i>&ensp;Zadáno - nejstarší <i class="fa fa-fw fa-sort-numeric-asc"></i></a></li>
      </ul>
    </div><!-- /dropdown -->
  </div><!-- /col -->
  
  
  <div class="col-md-4">
    <div style="position:absolute; left: -7.25ex; top: 7px;">Řadit podle: </div>
    <div class="dropdown">
      <button class="btn btn-link dropdown-toggle open" type="button" id="dropdownMenu2" data-toggle="dropdown" 
              aria-haspopup="true" aria-expanded="true">Číslo požadavku <span class="caret"></span></button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2" id="dropdownMenu2">
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fire fa-fw "></i>&ensp;&hairsp;Od nejdůležitějších</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-newspaper-o fa-fw "></i>&ensp;&hairsp;Nejnovější komentáře</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-anchor fa-fw "></i>&ensp;&hairsp;Nejdéle beze změny</a></li>
        
        <li role="separator" class="divider"></li>
        
        <li class="selected"><a href="#"><i class="fa fa-check fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-sort-numeric-desc fa-fw "></i>&ensp;&hairsp;Číslo požadavku</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-sort-numeric-asc fa-fw "></i>&ensp;&hairsp;Číslo požadavku</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-numeric-desc"></i>&ensp;&hairsp;Priorita - od nejvyšší</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-numeric-asc"></i>&ensp;&hairsp;Priorita - od nejnižší</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-alpha-asc"></i>&ensp;&hairsp;Předmět</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-alpha-desc"></i>&ensp;&hairsp;Předmět</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-amount-asc"></i>&ensp;&hairsp;Stav - od nových</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-amount-desc"></i>&ensp;&hairsp;Stav - od nejpokročilejších</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-numeric-asc"></i>&ensp;&hairsp;Termín - od nejbližších</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-numeric-desc"></i>&ensp;&hairsp;Termín - nejvzdálenější</i></a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-numeric-desc"></i>&ensp;&hairsp;Zadáno - nejnovější</a></li>
        <li><a href="#"><i class="fa fa-fw tt-check-spacing"></i>&ensp;<i class="fa fa-fw fa-sort-numeric-asc"></i>&ensp;&hairsp;Zadáno - nejstarší</a></li>
      </ul>
    </div><!-- /dropdown -->
  </div><!-- /col -->
</div><!-- /row -->
<div class="row" style="height: 42em;">
</div><!-- /row -->
<div class="row">
  <div class="col-sm-12">
    Poznámky: 
      - Pod oddělovačem řazeno abecedně.
     - Priorita řazena čísleně, od 1 do 4.
  </div>
</div><!-- /row -->
</div><!-- /container -->

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>

Selectbox řazení, bootstrap 3, ikony vpravo nebo vlevo.markdown

Selectbox řazení, bootstrap 3, ikony vpravo nebo vlevo

Width Font Awesome

A Pen by Tomáš Tintěra on CodePen.

License.

style.css

ul.dropdown-menu>li>a {
  padding-right: 40px;
}
i.tt-check-spacing0 {
  margin-left:-0.5em;
}
i.tt-check-spacing {
  margin-left:-0.75em; margin-right:-0.25em;
}
ul.dropdown-menu .dropdown-menu { font-size: 13px;}
.fa { margin-left: 0.1em; }
.row { margin-top: 2em; }
.dropdown-menu { display: block; }

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10028/page-comments.css" rel="stylesheet" />