मैं पासवर्ड रीसेट करने के लिए उस पर एक बटन और एक आइकन रखना चाहता हूं।

वर्तमान में मैं संपादन के लिए निम्नलिखित HTML कोड का उपयोग कर रहा हूं। bootstrap4 का उपयोग करना

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

तो पासवर्ड रीसेट करने के लिए मैं किस कोड का उपयोग कर सकता हूं

0
Santhosh 18 जुलाई 2021, 08:08

2 जवाब

सबसे बढ़िया उत्तर

उनमें से एक चुनें:

.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" />
1
Alireza Ahmadi 18 जुलाई 2021, 08:27

दो चीजें मैं ध्यान रखूंगा। सबसे पहले, बटन चुनते समय मुझे कुछ यूएक्स या सामग्री डिज़ाइन का पालन करने का प्रयास करना चाहिए जो डिज़ाइन द्वारा बताता है कि कौन से बटन प्राथमिक हैं और कौन से बटन माध्यमिक हैं और उनके प्लेसमेंट। दूसरे, यदि आइकन में अस्पष्टता है, तो टेक्स्ट जोड़ना एक अच्छा विचार है।

<!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>
0
Bharat 18 जुलाई 2021, 08:26