Archivo de la categoría: css

Listas desordenadas con FontAwesome

Deja una respuesta

Cambiar los bullets de las listas desordenadas a iconos de FontAwesome es más fácil de lo que parece.

Hacemos una lista de ejemplo:

<ul>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
</ul>

Y luego en el CSS la lista de cosas por hacer:

  1. Importar Font Awesome. En este ejemplo lo importamos desde un CDN pero lo puedes tener local si solo vas a necesitar unos iconos
  2. Quitar los estilos nativos de la lista con list-style:none;
  3. Poner el icono antes de la lista con li:before
/* importa fontawesome (o la que necesites) */
/* para esta prueba lo importé desde http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css */

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}

/* estilos para la lista y quitar el predeterminado */
ul { padding-left:20px; list-style:none; }
li { margin-bottom:10px; }

/* aqui viene la magia */
li:before {
    font-family: 'FontAwesome';
    content:"\f0a4";
    margin:0 5px 0 -15px;
}

Aquí está la lista en acción: http://jsfiddle.net/corchoweb/AHunC/

¿Cual es el icono mas raro que has usado en una lista?

Bug del z-index en Chrome 19.x

1 respuesta

La versión de Chrome 19.x hizo que uno de nuestros proyectos tuviera un error mostrando un menú desplegable.
Solo en Chrome se mostraba detras del contenido y gracias a http://mobile-web-development.tumblr.com/ que encontró el bug en el css del boilerplate es una línea para webkit.

html { … -webkit-overflow-scrolling: touch; … }

La quitas y el apilado (stacking) vuelve a su orden normal.

Hacks de CSS específicos para Firefox

Deja una respuesta

Traducción del artículo CSS Hacks Targeting Firefox de css-tricks.com

Con estos pedazos de código puedes hacer ajustes exclusivos para Firefox que, aunque lo hace muy bien, hace algunas cosas raras de vez en cuando con el código.
Para esos momentos incomodos en que el viejo zorro hace lo que quiere con el código lo podemos poner en cintura con estos tres códigos específicos.

Firefox 2

html>/**/body .selector, x:-moz-any-link {
  color:lime;
}

Firefox 3

html>/**/body .selector, x:-moz-any-link, x:default {
  color:lime;
}

Cualquier Firefox

@-moz-document url-prefix() {
  .selector {
     color:lime;
  }
}

Via: CSS Hacks Targeting Firefox