Cambiar el color de los glificones a azul en algunos - pero no en todos los lugares usando Bootstrap 2
Estoy usando el framework Bootstrap para mi IU. Quiero cambiar el color de mi glyphicons a azul, pero no en todos los lugares. En algunos lugares debe usar el color predeterminado.
Me he referido a estos dos enlaces, pero no encuentro nada útil.
- ¿Puedo añadir color a los iconos de bootstrap solo usando CSS?
- ¿Cómo cambio los glyphicons de Bootstrap 3 a blanco?
Tenga en cuenta: Estoy usando Bootstrap 2.3.2.
11 answers
El icono adoptará el valor color from de la propiedad css color de su padre.
Puede agregar esto directamente al estilo:
<span class="glyphicon glyphicon-user" style="color:blue"></span>
O puede agregarlo como una clase a su icono y luego establecer el color de fuente en CSS
HTML
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>
CSS
.blue {
color: blue;
}
Este violín tiene un ejemplo.
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-01-20 20:45:21
Simplemente aplique Bootstrap 3
text-success clase en el icono:
<span class="glyphicon glyphicon-play text-success">начал работу</span>
Hay más colores: Documentación de Bootstrap: Clases auxiliares
(El azul también está presente)
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-11-27 10:18:00
Finalmente encontré la respuesta yo mismo. Para añadir nuevos iconos en 2.3.2 bootstrap tenemos que añadir Fuente Awsome css en su archivo. Después de hacer esto podemos anular los estilos con css para cambiar el color y el tamaño.
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
CSS
.brown{color:#9b846b}
Si queremos cambiar el color del icono, simplemente agregue la clase marrón y el icono se convertirá en color marrón. También proporciona icono de varios tamaños.
HTML
<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
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
2013-11-18 09:50:04
Para bootstrap 3.0, esto funcionó para mí:
.myclass .glyphicon {color:blue !important;}
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-05-19 15:25:05
Usted puede hacer esto también, espero que ayude
<span style="color:black"><i class="glyphicon glyphicon-music"></i></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
2014-08-19 20:55:12
Sí, puede establecer los iconos en el color blanco. así es como funcionó para mí.
Bootstrap <3
HTML
<i class="icon-ok icon-white"></i>
Esto haría que su icono aparezca blanco.
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
2013-11-15 07:00:45
He creado una biblioteca de colores alternativa para bootstrap 2.3.2 está disponible y es fácil de usar para cualquier persona interesada en más colores para la antigua biblioteca de glyphicons.
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-12-01 17:02:26
Si es solo un icono de bootstrap. Tenga en cuenta que los iconos están bajo texto o más bien tipografía. Simplemente agregue la clase de color de texto de esta manera. Por ejemplo, text-primary, text-info y así sucesivamente hasta la clase icon:
<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>
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-22 15:27:07
Bootstrap > = v4. 0 dropped glyphicon support
Se ha eliminado la fuente del icono de Glyphicons. Si necesita iconos, algunas opciones son:
La versión original de Glyphicons
Fuente: https://v4-alpha.getbootstrap.com/migration/#components
Si está utilizando Bootstrap > = v4. 0 o posterior, puede usar clases de estilo existentes de bootstrap como text-success, text-warning sucesivamente.
Por ejemplo, si está utilizando fontawesome:
<i class="fa fa-tag text-danger" aria-hidden="true"></i>
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
2018-01-03 04:17:02
CSS:
.blue-icon{
color:blue !important;
}
HTML
<i class="fa fa-wrench blue-icon"></i>
Los glificones se eliminan en 4.0, recomiendo Font-awesome 4 o más reciente:)
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
2018-01-12 13:10:55
Todas las respuestas anteriores son correctas, pero aquí hay una manera simple y rápida si solo necesita un icono en un lugar para cambiar su color:
<p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>
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
2018-07-29 17:38:34