style - ¿Puedo agregar color a los iconos de arranque solo con CSS?
como cambiar el color ala letra en css (14)
El bootstrap de Twitter usa Icons by Glyphicons . Están " available in dark gray and white " por defecto:
¿Es posible usar algunos trucos de CSS para cambiar los colores de los íconos? Esperaba algún otro brillo css3 que evitara tener que tener una imagen de icono para cada color.
Sé que puedes cambiar el color de fondo del elemento adjunto ( <i> ), pero estoy hablando del color de primer plano del icono. Supongo que sería posible invertir la transparencia en la imagen del icono y luego establecer el color de fondo.
Entonces, ¿puedo agregar color a los íconos de arranque solo usando CSS?
Con la última versión de Bootstrap RC 3, cambiar el color de los iconos es tan simple como agregar una clase con el color que desea y agregarlo al tramo.
Color negro predeterminado:
<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>
se convertiría
<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>
CSS
.icon-success {
color: #5CB85C;
}
Debido a que los glyphicons ahora son fuentes, se pueden usar las clases contextuales para aplicar el color apropiado a los íconos.
Por ejemplo: <span class="glyphicon glyphicon-info-sign text-info"></span> agregar text-info al CSS hará que el ícono sea de color azul.
En realidad es muy fácil:
Solo usa:
.icon-name{
color: #0C0;}
Por ejemplo:
.icon-compass{
color: #C30;}
Eso es.
Esto es todo un poco indirecto ..
He usado glifos como este
</div>
<div class="span2">
<span class="glyphicons thumbs_up"><i class="green"></i></span>
</div>
<div class="span2">
<span class="glyphicons thumbs_down"><i class="red"></i></span>
</div>
y para afectar el color, incluí un poco de CSS en la cabeza como este
<style>
i.green:before {
color: green;
}
i.red:before {
color: red;
}
</style>
Voila, pulgares verdes y rojos.
La respuesta aceptada (usando font awesome) es la correcta. Pero como solo quería que la variante roja se mostrara en los errores de validación, terminé usando un paquete de complementos, amablemente ofrecido en este sitio .
Acabo de editar las rutas url en archivos css ya que son absolutas (empiezo por /) y prefiero ser relativo. Me gusta esto:
.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}
Los Bootstrap Glyphicons son fuentes. Esto significa que se puede cambiar como cualquier otro texto a través del estilo de CSS.
CSS:
<style>
.glyphicon-plus {
color: #F00;
}
</style>
HTML:
<span class="glyphicon glyphicon-plus"></span>
Ejemplo:
<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.glyphicon-plus {
color: #F00;
}
</style>
</head>
<body>
<span class="glyphicon glyphicon-plus"></span>
</body>
</html>
Mira el curso Up and Running con Bootstrap 3 de Jen Kramer, o mira la lección individual sobre la anulación de CSS central con estilos personalizados .
Otra forma posible de tener iconos de bootstrap en un color diferente es crear un nuevo .png en el color deseado (por ejemplo, magenta) y guardarlo como / ruta-a-bootstrap-css / img / glyphicons-halflings-magenta.png
En tus variables.less encuentra
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
y agrega esta línea
@iconMagentaSpritePath: "../img/glyphicons-halflings-magenta.png";
En tus sprites . Sin agregar
/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: url("@{iconMagentaSpritePath}");
}
Y úsalo así:
<i class=''icon-chevron-down icon-magenta''></i>
Espero que ayude a alguien.
Pensé que podría agregar este fragmento a esta publicación anterior. Esto es lo que hice en el pasado, antes de que los íconos fueran fuentes:
<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
Esto es muy similar a la respuesta furtiva de @frbl, pero no usa otra imagen. En cambio, esto establece el color de fondo del elemento <i> en white y usa la propiedad CSS border-radius para hacer que todo el <i> elemento <i> "redondeado". Si lo has notado, el valor del border-radius del border-radius (7.5px) es exactamente la mitad de la propiedad de width y height (ambos 15px, haciendo que el icono sea cuadrado), haciendo que el elemento <i> circular.
Puedes cambiar el color globalmente también
es decir
.glyphicon {
color: #008cba;
}
Sí, si usas Font Awesome con Bootstrap. Los íconos son ligeramente diferentes, pero hay más, se ven geniales en cualquier tamaño y puedes cambiar los colores de los mismos.
Básicamente, los íconos son fuentes y puedes cambiar el color de ellas solo con la propiedad de color CSS. Las instrucciones de integración se encuentran en la parte inferior de la página en el enlace provisto.
Editar: ¡Los iconos de Bootstrap 3.0.0 ahora son fuentes!
Como algunas otras personas también han mencionado con el lanzamiento de Bootstrap 3.0.0, los glifos de íconos predeterminados ahora son fuentes como Font Awesome, y el color se puede cambiar simplemente cambiando la propiedad CSS de color . Cambiar el tamaño se puede hacer a través font-size propiedad de font-size .
Simplemente use los GLYPHICONS y podrá cambiar el color simplemente configurando el CSS:
#myglyphcustom {
color:#F00;
}
También funciona con la etiqueta de estilo:
<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>
<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>
Trabajo rápido y sucio alrededor del cual lo hice por mí, sin colorear el icono, pero rodeándolo con una etiqueta o insignia del color que desea;
<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>
Usa la propiedad de la mask-image la mask-image , pero es un poco complicado. Está demostrado en el blog de Safari here .
También se describe en profundidad here .
Básicamente crearías un cuadro CSS, con una background-image: gradient(foo); y luego aplicarle una máscara de imagen basada en esas imágenes PNG.
Ahorraría tiempo de desarrollo haciendo imágenes individuales en Photoshop, pero no creo que ahorre mucho ancho de banda a menos que muestre las imágenes en una amplia variedad de colores. Personalmente, no lo usaría porque necesitas ajustar tu marcado para usar la técnica de manera efectiva, pero soy miembro de la escuela de pensamiento "la pureza es imperiosa".