elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recopilación Tutoriales y Manuales Hacking, Seguridad, Privacidad, Hardware, etc


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Iconos en bootstrap
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Iconos en bootstrap  (Leído 6,247 veces)
nyigu

Desconectado Desconectado

Mensajes: 7


De aquí hasta allá!!


Ver Perfil WWW
Iconos en bootstrap
« en: 14 Junio 2023, 20:59 pm »

Buenas a todos, llevo varios días que me estoy peleando en poner botones en php bootstrap, pero no lo consigo.
Lo curioso es que si no añado bootstrap me funciona perfectamente, pero a la que añado css me muestra el código en vez de los iconos.

Tengo una carga previa de un while($row1 = $resulta->fetch_array()){

Y en la parte de los iconos:

<div class="btn-group">
<button type="button" id="table" class="btn btn-default"><i class="glyphicon glyphicon-pencil" ></i></button>
<button type="button" id="table" class="btn btn-default"><i class="glyphicon glyphicon-trash" ></i></button>
</div>


Espero me podáis ayudar porque ya no se por donde tirar.

Mil gracias!!!


En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.075



Ver Perfil
Re: Iconos en bootstrap
« Respuesta #1 en: 15 Junio 2023, 14:53 pm »

Recomiendo usar el navegador web para inspeccionar el código generado y los estilos aplicados.

Depende de la versión de Bootstrap que uses la integración de los iconos, por ejemplo en Bootstrap 4 y 5 tienes https://icons.getbootstrap.com/ revisa el apartado install para usarlo de distintas formas, descargando el SVG (para usarlo luego como <img>), poniendo el código svg o por Icon Font que supongo es el que quieres:

Código
  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

Código
  1. <i class="bi bi-trash"></i>

La versión 3 de Bootstrap es la que integra glyphicon y los puedes usar libremente:
https://getbootstrap.com/docs/3.4/getting-started/#download-cdn
https://getbootstrap.com/docs/3.3/components/#glyphicons


En línea

nyigu

Desconectado Desconectado

Mensajes: 7


De aquí hasta allá!!


Ver Perfil WWW
Re: Iconos en bootstrap
« Respuesta #2 en: 16 Junio 2023, 18:59 pm »

Buenas,

Gracias por la respuesta, pero soy incapaz... ni con la versión 5 ni 4... :( instalé npm y nada tampoco!

Mira te dejo el código y me dices si hago algo mal. Insisto cuando meto la parte de bootstrap, desaparecen los iconos y sale el código.

<!DOCTYPE html>
<html lang="es" >
<head>
  <meta charset="UTF-8">
  <title>Inventari ICS</title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- partial -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script><script  src="./script.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/buttons/">

</head>
<body>
<div class="row table-responsive">
    <div class="panel-heading"><h2>Inv</h2></div>
        <div class="panel-body">
     

        <?php
   
           
             $co1 = $mysqli->query("SELECT COUNT(*) FROM alumnos WHERE es='MI'");
             $row=mysqli_fetch_array($co1);
             $res1= $row['COUNT(*)'];
             
             $co2 = $mysqli->query("SELECT COUNT(*) FROM alumnos WHERE es='PE'");
             $row=mysqli_fetch_array($co2);
             $res2= $row['COUNT(*)'];
             
             $co3 = $mysqli->query("SELECT COUNT(*) FROM alumnos WHERE es='BA'");
             $row=mysqli_fetch_array($co3);
             $res3= $row['COUNT(*)'];
             
             $co4 = $mysqli->query("SELECT COUNT(*) FROM alumnos WHERE es='MIGRI'");
             $row=mysqli_fetch_array($co4);
             $res4= $row['COUNT(*)'];           
             
             $co5 = $mysqli->query("SELECT COUNT(*) FROM alumnos WHERE op='1'");
             $row=mysqli_fetch_array($co5);
             $res5= $row['COUNT(*)'];       
             
             $co6 = $mysqli->query("SELECT COUNT(*) FROM alumnos WHERE call='1'");
             $row=mysqli_fetch_array($co6);
             $res6= $row['COUNT(*)'];       
             
             $co7 = $mysqli->query("SELECT COUNT(*) FROM alumnos WHERE enq='1'");
             $row=mysqli_fetch_array($co7);
             $res7= $row['COUNT(*)'];   
    echo '<div align="center">
         <table width="700" border="0" cellspacing="0" cellpadding="0">
         
            <tr>
                <td><div align="center">Mi:</div></td>
                <td><div align="center">Mig:</div></td>
                <td><div align="center">Cep:</div></td>
                <td><div align="center">Ceb:</div></td>
                <td><div align="center">Op Automàtiques:</div></td>
                <td><div align="center">Call:</div></td>
                <td><div align="center">En:</div></td>             
            </tr>
            <tr>
                <td><div align="center"><h2>'.$res1.'</h2></div></td>
                <td><div align="center"><h2>'.$res4.'</h2></div></td>
                <td><div align="center"><h2>'.$res2.'</h2></div></td>
                <td><div align="center"><h2>'.$res3.'</h2></div></td>
                <td><div align="center"><h2>'.$res5.'</h2></div></td>
                <td><div align="center"><h2>'.$res6.'</h2></div></td>
                <td><div align="center"><h2>'.$res7.'</h2></div></td>               
               
            </tr>                   
               
               </table></div>'
         ?>


                  <table   
                        id="table"
                        data-toggle="table"
                        data-height="600"
                        data-search="true"
                        data-regex-search="true"
                        data-pagination="true"
                        data-url="json/data1.json">
                       
                    <thead>
                      <tr>
                       
                        <th data-field="id">ID</th>
                        <th data-field="ger">Ger</th>
                        <th data-field="cod" >Codi</th>
                        <th data-field="ser">Ser</th>
                        <th data-field="seu">Seu</th>
                        <th data-field="in">iN</th>
                        <th data-field="es">Es</th>
                        <th data-field="obs">Obs</th>
                        <th>Acc</th>
     
                      </tr>
                    </thead>
                   
                    <tbody>
                        <?php
                        while($row1 = $resulta->fetch_array()){
                            //while($row1 = mysql_fetch_array($resulta)){
                        ?>
                        <tr>
                            <td><?=$row1[0]?></td>
                            <td><?=$row1[1]?></td>
                            <td><?=$row1[2] ?></td>
                            <td><?=$row1[4]?></td>
                            <td><?=$row1[5]?></td>
                            <td><?=$row1[8]?></td>           
                            <td><?=$row1[21]?></td>         
                            <td><?=$row1[23]?></td>
                            <td>
                                <div class="d-flex gap-2 justify-content-center py-5">
                                  <button type="button" class="btn btn-outline-secondary btn-rounded" data-mdb-ripple-color="dark">Editar</button>
                                  <button type="button" class="btn btn-outline-danger btn-rounded" data-mdb-ripple-color="dark">Eliminar</button>
                                </div>
                            </td>
                       </tr>
                        <?php } ?>
                    </tbody>
                  </table>
        </div>
      </div>     
    </div>
</body>
</html>


La cosa es que me gusta mucho como queda con el buscador y el paginado, pero que no hay manera de meter los iconos para editar y eliminar.

Se te ocurre algo?

Mil gracias de nuevo!!!!!
En línea

nyigu

Desconectado Desconectado

Mensajes: 7


De aquí hasta allá!!


Ver Perfil WWW
Re: Iconos en bootstrap
« Respuesta #3 en: 17 Junio 2023, 09:56 am »

Buenas,

Encontré el problema, me lo dijeron en otro foro. En mi código estoy usando la versión de /bootstrap-table/1.10.0/bootstrap-table.min.css' que solo muestra el contenido de los <td> y en la versión /bootstrap-table/1.22.0/bootstrap-table.min.css' muestra el contenido HTML.

Espero que le sirva a alguien.

Saludos!
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Bootstrap
Desarrollo Web
kakashi20 5 3,174 Último mensaje 13 Junio 2014, 06:29 am
por flacc
[Resuelto] Inicializar bootstrap-tooltip en Bootstrap v3.0.3
Desarrollo Web
DarK_FirefoX 0 3,536 Último mensaje 6 Abril 2015, 17:28 pm
por DarK_FirefoX
[Pack iconos Windows 10] Cambiar iconos de Windows (Tutorial)
Windows
DeMoNcRaZy 3 19,386 Último mensaje 8 Septiembre 2015, 12:59 pm
por Eleкtro
bootstrap 4
Desarrollo Web
Beginner Web 2 2,483 Último mensaje 17 Abril 2020, 23:11 pm
por EdePC
Bootstrap
Desarrollo Web
FGM24 2 2,643 Último mensaje 10 Septiembre 2021, 23:47 pm
por [u]nsigned
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines