font-awesome：用于重置密码的图标及其代码是什么

Question

我想要一个用于重置密码的按钮和图标。

目前我正在使用以下 html 代码进行编辑。使用 bootstrap4

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

那么我可以使用什么代码来重置密码

Answer 1

选择其中一项：

.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" />

Answer 2

有两件事我会处理。首先，在选择按钮时，我必须尝试遵循一些 UX 或 material 设计，这些设计通过设计告诉我们哪些按钮是主要的，哪些按钮是次要的，以及它们的位置。其次，如果图标有歧义，最好添加文字。

<!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>

font-awesome：用于重置密码的图标及其代码是什么

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

bootstrap-4

font-awesome