¿Cómo Puedo Hacer Glyphicons Más Grande? (Cambiar Tamaño?)
Me gustaría hacer el globo glyphicon más grande para que cubra una gran parte de la página (es una imagen vectorial). No está en un botón ni nada; está solo. ¿Hay alguna manera de hacer esto?
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe"></span>
</div>
7 answers
Aumenta el tamaño de la fuente de glyphicon para aumentar el tamaño de todos los iconos.
.glyphicon {
font-size: 50px;
}
Para apuntar solo a un icono,
.glyphicon.glyphicon-globe {
font-size: 75px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-25 17:02:05
Fontawesome tiene una solución perfecta para esto.
Implementé lo mismo. sólo en su principal .archivo css añadir esto
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
En tu ejemplo solo tienes que hacer esto.
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-26 20:14:06
Si está utilizando bootstrap y font-awesome, entonces es fácil, no hay necesidad de escribir una sola línea de código nuevo, solo agregue fa-Nx, tan grande como desee, Vea la demo
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-04 16:14:54
Intente usar encabezado, no necesita css adicional
<h1 class="glyphicon glyphicon-plus"></h1>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-22 13:29:03
Sí, y básicamente también puedes usar estilo en línea:
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-11 15:06:54
Para ex .. añadir clase:
Btn-lg-LARGE
Btn-sm-SMALL
Btn-xs-Muy pequeño
<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>
<button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
Ref link Bootstrap: Glyphicons Bootstrap
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-28 05:00:44
He usado clases de encabezado bootstrap ("h1", "h2", etc.) para esto. De esta manera obtendrá todos los beneficios de estilo sin usar las etiquetas reales. He aquí un ejemplo:
<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-06 01:05:42