font-awesome: what is the icon and its code used for reset password

user_2897115 0
Viewed 2903

I want to have a button and an icon on it for resetting password.

Currently I am using the following html code for edit. Using bootstrap4

<button class="btn btn-primary btn-xs" type="button" id="edit" title="Edit User"><i class="fa fa-edit"></i></button>

So what code I can use for reset password

font-awesome bootstrap-4
2 Answers

Choose one of them:

.fa-passwd-reset > .fa-lock, .fa-passwd-reset > .fa-key  {
  font-size: 0.85rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
<span class="fa-passwd-reset fa-stack">
        <i class="fa fa-undo fa-stack-2x"></i>
        <i class="fa fa-lock fa-stack-1x"></i>
    </span> <label>Reset Password:</label>
    <input type="password" name="new-passwd" />
    <br>
    
    <span class="fa-passwd-reset fa-stack">
        <i class="fa fa-undo fa-stack-2x"></i>
        <i class="fa fa-key fa-stack-1x"></i>
    </span> <label>Reset Password:</label>
    <input type="password" name="new-passwd" />

user_113590760

Two things I would take care of. Firstly, while choosing buttons I must try to follow some UX or material design that tells by design which buttons are primary and which buttons are secondary and their placements. Secondly, if there is ambiguity in the icon, then it's a good idea to add text.

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>
    <button class="btn btn-primary btn-xs" type="button" id="edit" title="Edit User"><i class="fa fa-edit"></i></button>
    <button class="btn btn-secondary btn-xs" type="button" id="edit" title="Edit User"><i class="fa fa-refresh"></i></button>
    <button class="btn btn-secondary btn-xs" type="button" id="edit" title="Edit User"><i class="fa fa-undo"></i></button>
  </body>
</html>

user_7168130
Related