Font Content with Values Back
- There is 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.
.element {
position: relative;
}
.element::before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}
Useage
- the first thing you should do is to load font of Font Awesome from the follow fonts(download them and put them in an directory like
fonts/
):
- then, load them into css:
@fontAwesomePath: '../fonts';
@font-face {
font-family: 'FontAwesome';
src: url('./../fonts/fontawesome-webfont.eot');
src: url('./../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('./../fonts/fontawesome-webfont.woff') format('woff'), url('./../fonts/fontawesome-webfont.ttf') format('truetype'), url('./../fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
- so you can use them like this:
.element::before {
content: "\f000";
font-family: FontAwesome;
}
Lists