How to insert html inside form element div

Question

I want to enhance the login form fields with icons from Font Awesome. For this I need to add some html inside the div of the name and pass fields (to be able to position accurately with css). The html part is for example something like

<i class="icon-lock icon-large"></i>

I tried using #suffix with hook_form_alter, but then the html is added after the div. I also tried with a user-login.tpl.php, but it seems you can only render individual form elements with drupal_render, for example drupal_render($form['name']); But this also outputs the entire div.

What I want to end up with is something like this:

<div class="form-item form-type-password form-item-pass">
  <input id="edit-pass" class="form-text required" type="password" maxlength="128" size="60" name="pass" placeholder="Password">
  <i class="icon-lock icon-large"></i>
</div>

I'm using Drupal 7.

Answer 1

Assuming you don't need the input wrapper. Just remove it:

$form['pass'] = array(
        '#type'             => 'password',
        '#title_display'    => 'none',
        '#maxlength'        => 128,
        '#size'             => 60,
        '#required'         => TRUE,
        '#theme_wrappers'   => array(), // remove the wrapper
        '#prefix'           => '',
        '#suffix'           => '<i class="icon-lock icon-large"></i>',
        '#attributes'       => array(
                                'placeholder'   => t('Password')
                            ),
        );

the icon will be placed after the input:

<input type="password" maxlength="128" size="60" name="pass" id="edit-pass" placeholder="Password" class="inputbox form-text required">
<i class="icon-lock icon-large"></i>

But if you need that div wrapper, you can just rearrange his position:

$form['pass'] = array(
        '#type'             => 'password',
        '#title_display'    => 'none',
        '#maxlength'        => 128,
        '#size'             => 60,
        '#required'         => TRUE,
        '#theme_wrappers'   => array(), // remove the wrapper
        '#prefix'           => '<div class="form-item form-type-password form-item-pass">',
        '#suffix'           => '<i class="icon-lock icon-large"></i></div>',
        '#attributes'       => array(
                                'placeholder'   => t('Password')
                            ),
        );

Now the output will be exactly as you wrote:

<div class="form-item form-type-password form-item-pass">
    <input type="password" maxlength="128" size="60" name="pass" id="edit-pass" placeholder="Password" class="form-text required">
    <i class="icon-lock icon-large"></i>
</div>