A list of Font Awesome icons and their CSS content values

Biblioteca enigma, sección de libros de consulta general en diferentes formatos
Avatar de Usuario
Enigma
Administrador del Sitio
Administrador del Sitio
Mensajes: 1268
Registrado: 20 Oct 2013, 16:26
Genero: Mujer
Profesion: Webmaster CEO SEO
Ubicacion: Matrix
Navegador: Chrome
Contactar:

A list of Font Awesome icons and their CSS content values

Mensaje sin leer por Enigma » 10 Jul 2015, 12:41

A list of Font Awesome icons and their CSS content values

Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more. Whilst the implementation in Bootstrap is designed to be used with the <i> element (Bootstrap v2), you may find yourself wanting to use these icons on other elements. To do so, you'll need to use the following CSS on the desired element, and then substitute in the content value for the relevant icon.

Código: Seleccionar todo


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.element {
    position: relative;
}
 
/*replace the content value with the
corresponding value from the list below*/
 
.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}
Note: it is not possible to use :before or :after pseudo content on <input> elements, however if you instead use <button>Label</button>, it will work as desired.
Below is a Font Awesome cheat sheet of all the content values for each icon:

Enlace de Ejemplos FontAwesome



Volver a “Area Ingenieria - Programacion - Web - Computacion”