A list of Font Awesome icons and their CSS content values
Publicado: 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.
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
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;
}
Below is a Font Awesome cheat sheet of all the content values for each icon:
Enlace de Ejemplos FontAwesome