iconos login

src/app/pages/login/login.component.html

@@ -26,38 +26,26 @@
         <form (ngSubmit)="onLogin()">
           
           <!-- Email -->
-          <div class="p-input-icon-left mb-3">
+          <input 
-            <!-- <i class="pi pi-envelope"></i> -->
+            type="email" 
-            <input 
+            pInputText 
-              type="email" 
+            [(ngModel)]="email" 
-              pInputText 
+            name="email" 
-              [(ngModel)]="email" 
+            placeholder="Email" 
-              name="email" 
+            class="input-with-icon w-full mb-3" 
-              placeholder="Email" 
+            style="background-color: white; color: black;"
-              class="w-full"
+          />
-              style="background-color: white;color: black"
-            />
-            <span class="icon" style="background-color: white;color: black"><i class="fas fa-search" style="color: black"></i></span>
-            <!-- <span class="p-inputgroup-addon bg-red-600 text-900">&#64;</span>
-            <span class="p-inputgroup-addon">
-              <i class="pi pi-envelope"></i>
-            </span> -->
-            
-          </div>
 
           <!-- Password -->
-          <div class="p-input-icon-left mb-4">
+          <input 
-            <!-- <i class="pi pi-lock"></i> -->
+            type="password" 
-            <input 
+            pInputText 
-              type="password" 
+            [(ngModel)]="password" 
-              pInputText 
+            name="password" 
-              [(ngModel)]="password" 
+            placeholder="Password" 
-              name="password" 
+            class="input-with-lock w-full"
-              placeholder="Password" 
+            style="background-color: white; color: black;"
-              class="w-full "
+          />
-              style="background-color: white;color: black"
-            />
-          </div>
 
           <!-- Botón -->
           <div class="login-actions">

src/app/pages/login/login.component.scss

@@ -218,7 +218,7 @@
 
 .sub-title {
   font-size: 1.8rem;
-  margin-bottom: 60px;
+  margin-bottom: 0px;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   transform: translate(-4%);
 }
@@ -235,7 +235,7 @@
 
 .water-drop-container {
   position: absolute;
-  top: 30%;
+  top: 26%;
   left: 49%;
   transform: translate(-50%, -50%);
   width: 41px;
@@ -254,7 +254,7 @@
 .text-drop {
   position: relative;
   color: white;
-  top: 20%;
+  top: 15%;
   font-weight: bold;
   font-size: 1.2rem;
   z-index: 2;
@@ -266,3 +266,19 @@
   bottom: 20px;
   left: 20px;
 }
+
+.input-with-icon {
+  background-image: url("data:image/svg+xml,%3Csvg fill='gray' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4C2.897 4 2 4.897 2 6v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zM4 6h16l-8 5-8-5zm0 12V8l8 5 8-5v10H4z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 20px 20px;
+  padding-right: 35px; /* espacio para que el texto no choque con el ícono */
+}
+
+.input-with-lock {
+  background-image: url("data:image/svg+xml,%3Csvg fill='gray' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8h-1V6c0-2.757-2.243-5-5-5S6 3.243 6 6v2H5c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V10c0-1.103-.897-2-2-2zM8 6c0-1.654 1.346-3 3-3s3 1.346 3 3v2H8V6zm9 16H5V10h12v12z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 20px 20px;
+  padding-right: 35px; /* espacio para que el texto no se superponga al ícono */
+}

src/main.ts

@@ -1,6 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import '@fortawesome/fontawesome-free/css/all.min.css';
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));