How to add glyphicon glyphicon-calendar with bootstrap dropdown in pug?

Question

I am new in pug , and trying to add glyphicon glyphicon-calendar in dropdown menu on "All months" ?

.pull-right
   select.form-control.btn-primary#selectMonth(style="margin-top: -15px;")
   option(selected="selected" value='') All Months
   option(value='1' ) January
   option(value='2') February
   option(value='3') March
   option(value='4') April
   option(value='5') May
   option(value='6') June
   option(value='7') July
   option(value='8') August
   option(value='9') September
   option(value='10') October
   option(value='11') November
   option(value='12') December

How to add glyphicons?

In front of All Months option I want glyphicon calendar:

Answer 1

Put glyphicon inside the absolutely positioned span. Like:

div.pull-right(style="position: relative;")
   span.glyphicon.glyphicon-calendar(style="position: absolute; top:50%; left: 5px; margin-top: -0.5em; font-size: 2em;")
   select.form-control.btn-primary#selectMonth(style="padding-left: 2.5em")
      option(selected="selected" value='') All Months
      option(value='1' ) January
      option(value='2') February
      option(value='3') March
      option(value='4') April
      option(value='5') May
      option(value='6') June
      option(value='7') July
      option(value='8') August
      option(value='9') September
      option(value='10') October
      option(value='11') November
      option(value='12') December

codepen example