Antes de comenzar a personalizar iconos con css
Antes de continuar, si no conoces como funciona Font Awesome, te recomiendo que leas este post: Icon Fonts: cómo utilizar Font Awesome en nuestra web. En él, explico cómo puedes utilizar estos iconos e incluirlos en tu web.
Si ya lo has leído o lo tienes controlado, podemos empezar a personalizar nuestros iconos con CSS 🙂
Los icons Font, como la librería Font Awesome, son geniales para web; pesan muy poco consumiendo pocos recursos, son fáciles de personalizar con CSS, y además, pueden escalarse sin problemas de pixelado.
Añadir un icono
Para comenzar vamos a añadir un párrafo con un icono. Como comentaba en el post anterior Icon Fonts: cómo utilizar Font Awesome en nuestra web, añadimos el icono a través del pseudo elemento :before de la clase fa-bullhorn.
Código HTML:
|
1 |
<p class="novedades"><i class="fa fa-bullhorn" aria-hidden="true"></i> Últimas novedades</p> |
Código CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.fa-bullhorn:before { content: "\f0a1"; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } |
Resultado
Cambiar el tamaño del icono
Para cambiar el tamaño del icono simplemente hay que añadir la regla de CSS font-size a la etiqueta <i>:
|
1 2 3 |
.novedades_size i{ font-size: 100px; } |
Resultado
Cambiar el color y fondo
Podemos darle cualquier color a nuestro icono y/o al fondo, utilizando el siguiente código:
|
1 2 3 4 5 6 |
.novedades i{ background: #3FFFD7; color: #1F7F6B; font-size: 30px; padding: 5px; } |
Resultado
Añadiendo un toque de estilo
Ahora vamos a modificar la anchura y la altura, además, utilizaremos la propiedad text-align:center para alinear el icono en el centro, la propiedad line-height para alinearlo verticalmente, y por último, añadimos border-radius para redondear el fondo.
|
1 2 3 4 5 6 7 8 9 10 11 |
.novedades i{ background: #3FFFD7; color: #1F7F6B; font-size: 30px; padding: 5px; width: 60px; height: 60px; text-align: center; line-height: 50px; border-radius: 50%; } |
Resultado
Ahora vamos a añadir un borde y sombra interior.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.novedades i{ background: #3FFFD7; color: #1F7F6B; font-size: 30px; padding: 5px; width: 60px; height: 60px; text-align: center; line-height: 45px; border-radius: 50%; border:2px solid #2FBFA1; -webkit-box-shadow:inset 0 0 15px 0 rgba(0,0,0,0.3); box-shadow:inset 0 0 15px 0 rgba(0,0,0,0.3); text-shadow: 0 1px 0 rgba(255,255,255,0.3); } |
Resultado
Modificando la posición de nuestro icono
Vamos a modificar la posición de nuestro icono. Para ello utilizaremos la propiedad de CSS position. Para que la posición del icono sea relativa al párrafo que lo contiene tenemos que añadir postion:relative al párrafo y position:absolute al elemento <i>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.novedades{ position: relative; background: #3FFFD7; display: inline-block; padding: 25px 20px 25px 45px; border-radius: 5px; color: #1F7F6B; text-transform: uppercase; } .novedades i{ background: #3FFFD7; color: #1F7F6B; font-size: 30px; padding: 5px; width: 60px; height: 60px; text-align: center; line-height: 45px; border-radius: 50%; border:3px solid #fff; -webkit-box-shadow:inset 0 0 15px 0 rgba(0,0,0,0.4); box-shadow:inset 0 0 15px 0 rgba(0,0,0,0.4); text-shadow: 0 1px 0 rgba(255,255,255,0.4); position: absolute; left: -30px; top: 7.5px; transform:rotate(-45deg); } |
Resultado
Añadir icono sin utilizar la etiqueta <i> ni clases.
En todos los ejemplos anteriores hemos añadido reglas de CSS directamente a la etiqueta <i>, pero ahora vamos a añadir un icono a cualquier elemento (por ejemplo un div) de nuestro documento HTML a través del pseudo selector :before. Además jugaremos con la posición del icono con las propiedades top y left.
Creamos un div con la clase highlight y un texto en su interior:
|
1 2 3 4 5 |
<div class="highlight"> Donec quam arcu, porta id volutpat vel, pellentesque mattis est. Duis id varius nisl, sed tempor dolor. Donec mollis molestie rhoncus. Nunc sit amet felis nec nibh pharetra ..... </div> |
Para añadir un icono, tenemos que utilizar el pseudo elemento :before. Con las dos primeras líneas del siguiente código CSS, estamos indicando que antes de cualquier elemento con la clase hightlight, vamos a mostrar el contenido «/f006» y se debe mostrar con la tipografía FontAwesome. Recuerda que FontAwesome y otras Icon Fonts tienen asociado un valor a cada icono. Puedes ver los valores de FontAwesome en esta web: http://astronautweb.co/snippet/font-awesome/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.highlight:before{ font-family: 'FontAwesome'; /* Indicamos que la tipografía es FontAwesome */ content: "\f006"; /* Este valor es el que muestra un icono de estrella*/ position: absolute; top: 0; font-size: 40px; height: 100px; width: 100px; line-height: 95px; text-align: center; background: yellow; border-radius: 50%; top: -50px; left: 50%; margin-left: -50px; border:4px solid #fff; } .highlight{ background: #FFF67B; padding:85px 35px; margin-bottom: 60px; position: relative; } |
Resultado
Otro ejemplo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.highlight_2{ background: #FFF67B; padding:85px 35px 85px 250px; margin-bottom: 60px; position: relative; } .highlight_2:before{ font-family: 'FontAwesome'; content: "\f006"; position: absolute; top: 0; color: rgba(0,0,0,0.2); font-size: 300px; line-height: 300px; text-align: center; border-radius: 50%; top: 0px; left:15px; transform:rotate(30deg); } |
Resultado
¿Te parece complicado personalizar iconos con CSS? ¿Prefieres utilizar imágenes? Cuéntame tu opinión en los comentarios.
Espero que te haya gustado este tutorial y te animes a crear iconos personalizados para darle un toque extra a tus proyectos y diseños. Recuerda que puedes descargar los archivos originales de estos ejemplos.
Descarga todos estos iconos y utilízalos en tus proyectos
Hola, agradezco tu aportanción con el texto de arriba.
Sin embargo me gustaría saber como sobrescribir un icono que ya esta en un pluguing y cambiarlo por uno totalmente personalizado.
Gracias
Hola Mariana.
En principio si. Tendrías que seguir las directrices de este post.
Y sobre escribir las regla css que afectan al icono del que me hablas.
Un saludo
Hola Mariana. Es muy relativo y no tengo información suficiente. Es más puede que el icono incluso sea una imagen y por lo tanto no podrías seguir estos pasos.
Agradezco mucho tu explicación tan detallada la verdad me estaba volviendo loco trataba de poner dos en la cabecera pero lo estaba haciendo mal.
Te pregunto algo.
Me podrías dar un tips sobre el tema de elegir los colores para las web ?
Hola Augusto.
Gracias por visitar el blog y comentar.
Es un tema un poco complicado para resumir en un post pero mi consejo es que utilices fondos neutros, un color principal y otro para botones y llamadas a la acción.
Hola! Muy buena entrada!
Quería hacerte una consulta.
Cuando coloco los íconos de Fontawesome en mi html, por defecto aparecen de color violeta, queria saber de que forma los puedo cambiar en css, para que me queden de color negro.
Gracias
Hola Eliana.
Posiblemente tengas otra hoja de estilos aplicando este color. O bien se estén aplicando los estilos por defecto del navegador. Prueba a poner en tu css esto .fa{color:#tucolor !important;} Con la etiqueta important estarás forzando a que se vean del color que indicas.
Otra posibilidad es que estén dentro de un enlace y por eso el color se esté cambiando.
Ya me cuentas!! Gracias por comentar
Hola!
Tengo una duda.
¿Cómo cambiarías el color del icono según un valor?
Por ejemplo: tengo una página web donde requiero mostrar la disponibilidad de un producto mediante un icono de color, si el producto esta disponible, el color del icono deberá ser verde, si esta agotado deberá cambiar a rojo.
Gracias de antemano por tu respuesta.
Saludos!
Hola Cecilia. Necesitarías tomar algún valor o clase. Si esta disponible class=»disponible» si no class=»no-stock» por decirte algo. Pero no se pueden aplicar propiedades CSS dependiendo del contenido HTML.
Me gusto