Título: Iconos en bootstrap Publicado por: nyigu 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!!! Título: Re: Iconos en bootstrap Publicado por: EdePC 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
Código 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 Título: Re: Iconos en bootstrap Publicado por: nyigu 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!!!!! Título: Re: Iconos en bootstrap Publicado por: nyigu 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! |