3

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.

11

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.