My octicon appears on top of field instead of beside it

Question

I wish to add <i class="fas fa-coffee"></I>

to the html file (next to an item in the form i.e. the first name):

<div>
        {% from "_formhelpers.html" import render_field %}
        <form method="post" enctype="multipart/form-data">
            <div class = "container">
                <div class = "row">
                    <div class="col-md-5 col-md-12 align-self-center">
                        <div class="card">
                            <div class="card-header">
                                Register
                            </div>
                            <div class="card-body" style="color: white;">
                                <div>
                                    {{ form.hidden_tag()}}
                                
                                    {{ render_field(form.fname, class="form-control")}}
                                    {{ render_field(form.lname, class="form-control")}}
                                    {{ render_field(form.email, class="form-control")}}
                                    {{ render_field(form.phoneno, class="form-control")}}
                                    {{ render_field(form.password, class="form-control")}}
                                    {{ render_field(form.confirm_password, class="form-control")}}
                                    {{ render_field(form.account_type, class="form-control")}}
                                    
                                    {{ render_field(form.submit, class="btn btn-primary-register")}}
                                </div>
                                <p>Already have an account? <a href="{{ url_for('auth.login')}}">Login</a></p>
                                <p>Back to <a href = "{{ url_for('index')}}">Home</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

The problem is, when I add it next to the item i.e.

 <i class="fas fa-coffee"></I>{{ render_field(form.fname, class="form-control")}}

the octicon appears on the top of the name instead of beside it. This may be a basic question but I am a bit lost as to what I am doing wrong. Any help would be appreciated. Thank you!