Hola buenas , estoy creando una aplicacion web la cual estoy utilizando una plantilla bootstrap de administracion. En concreto esta: http://themes.laborator.co/#theme=neon
Esta plantilla tiene unos iconitos para chat , lenguaje , mensaje de mail etc. Son cosas que utilizaré cuando la app esté más desarrollada y lo que me gustaría sería dejarlos pero deshabilitados. O sea que no tuvieran acción y si pudiera ser que se quedaran como más con un tono gris o que cuando pasaras el cursor te saliera el cursor de disabled como por ejemplo cuando intentas escribir en un campo de formulario desahabilitado
Gracias de antemano.
Respuestas
No se si la plantilla lo soporta, pero en Bootstrap la mayoría de elementos se desactivan con la clase .disabled de CSS. Si no funciona para esos iconos, simplemente utiliza estilos como estos pero adaptándolos a tus necesidades:
.icono-chat.disabled { color: #CCC; } .icono-chat.disabled:hover { cursor: not-allowed; text-decoration: none; }
@javiereguiluz
Una pregunta más, ¿en qué archivo css se encuentran estos iconitos?
@javierecompring
Si hablamos del mismo icono de Chat, fíjate en su código HTML:
<a href="#" data-toggle="chat" data-collapse-sidebar="1"> <i class="entypo-chat"></i> Chat <span class="badge badge-success chat-notifications-badge">3</span> </a>
El icono se muestra con <i class="entypo-chat"></i>, que es la técnica habitual cuando utilizas una tipografía especial que en vez de letras contiene iconos. Así que esos iconos no existen como archivos gráficos independientes.
Al parecer esta plantilla utiliza su propia fuente de iconos, pero existen muchas otras que son gratuitas y que contienen cientos de iconos. La fuente más famosa de este tipo es la espectacular Font Awesome.
@javiereguiluz
No quería modificar el icono lo que he intentado es añadirle el .disabled, pero no hace caso. Entonces querría editar la clase pero no se si se puede
@javierecompring
Gracias a estas fuentes de iconos vas a poder cambiar su color muy fácilmente. Sólo tienes que cambiar el color del texto del elemento i. Sería bueno añadir algún id o class para que el selector de CSS sea más preciso, pero lo siguiente ya funciona:
a i { color: #CCC; }
@javiereguiluz
Gracias por todo
@javierecompring