add bootstrap icon perfil

2026-09-23 14:07:15 +02:00
parent cf8a14c51a
commit 4def004bd6
1 changed files with 38 additions and 11 deletions
@@ -12,6 +12,11 @@
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet">

+    <!-- Bootstrap Icons -->
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+
    <!-- Google Font: Fredoka -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -28,10 +33,12 @@


 <body>
+
    <?php
    include_once 'cabecera.php';
    ?>

+
    <div class="perfil-container">

        <div class="perfil-card">
@@ -41,7 +48,8 @@
            <!-- ========================= -->

            <div class="perfil-header">
-                👤 Mi perfil
+                <i class="bi bi-person-circle"></i>
+                Mi perfil
            </div>


@@ -82,8 +90,11 @@
                                type="button"
                                class="btn-foto"
                                onclick="seleccionarFoto()"
-                                title="Cambiar foto de perfil">
-                                ✏️
+                                title="Cambiar foto de perfil"
+                                aria-label="Cambiar foto de perfil">
+
+                                <i class="bi bi-pencil-fill"></i>
+
                            </button>


@@ -107,7 +118,9 @@
                            <label
                                for="nuevoNombre"
                                class="form-label">
+
                                Cambia tu nombre
+
                            </label>


@@ -123,8 +136,11 @@
                                <button
                                    type="button"
                                    class="btn-perfil-cambiar"
-                                    onclick="cambiarNombre()">
-                                    ✔ Cambiar nombre
+                                    onclick="cambiarNombre">
+
+                                    <i class="bi bi-check-lg"></i>
+                                    Cambiar nombre
+
                                </button>


@@ -132,7 +148,10 @@
                                    type="button"
                                    class="btn-perfil-borrar"
                                    onclick="borrarNombre()">
-                                    ✖ Borrar
+
+                                    <i class="bi bi-x-lg"></i>
+                                    Borrar
+
                                </button>

                            </div>
@@ -151,13 +170,15 @@
                        <div class="estadisticas">

                            <h2>
-                                📊 Estadísticas
+                                <i class="bi bi-bar-chart-fill"></i>
+                                Estadísticas
                            </h2>


                            <div class="estadistica estadistica-victorias">

-                                🏆 &nbsp; Victorias:
+                                <i class="bi bi-trophy-fill"></i>
+                                &nbsp; Victorias:

                                <strong>
                                    0
@@ -168,7 +189,8 @@

                            <div class="estadistica estadistica-derrotas">

-                                ❌ &nbsp; Derrotas:
+                                <i class="bi bi-x-circle-fill"></i>
+                                &nbsp; Derrotas:

                                <strong>
                                    0
@@ -179,7 +201,8 @@

                            <div class="estadistica estadistica-aciertos">

-                                🎯 &nbsp; Aciertos:
+                                <i class="bi bi-bullseye"></i>
+                                &nbsp; Aciertos:

                                <strong>
                                    0
@@ -199,9 +222,13 @@

    </div>

+
+    <!-- Bootstrap JS -->
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
    </script>
+
+    <!-- Tu JavaScript -->
    <script src="js/perfil.js"></script>

 </body>