Fontawesome icons showing above label instead of inline with textfield

After installing fontawesome module on drupal 8 site, I tried the following:

    public function buildForm(array $form, FormStateInterface $form_state) {
      $form['street1']['widget']['#prefix'] =
          '<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>';
    }

The "envelope" icon shows up quite alright -but its showing above my "Street Address" label, instead of inline before the actual input textfield.

Viewing source of my page shows the following:

    <div class="field--type-string field--name-street1 field--widget-string-textfield js-form-wrapper form-wrapper" data-drupal-selector="edit-street1-wrapper" id="edit-street1-wrapper">
        <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>      
        <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-street1-0-value form-item-street1-0-value">
            <label for="edit-street1-0-value" class="js-form-required form-required">Street address</label>
            <input class="js-text-full text-full form-text required" data-drupal-selector="edit-street1-0-value" type="text" id="edit-street1-0-value" name="street1[0][value]" value="" size="60" maxlength="255" placeholder="" required="required" aria-required="true" />
        </div>
    </div> 

Clearly the fontawesome "i class" tag is actually above the "label" tag.
Please any ideas how to remedy the situation and show the icon just to the left of the textfield?

Thanks