Css Tricks

A list of Font Awesome icons and their CSS content values

A list of Font Awesome icons and their CSS content values

About Font Awesome

Font Awesome provides the web’s most popular icon set, toolkit, vector icons and social logos on your website.

Let get on to the article. Below are the main standard css steps you should use in your stylesheet to display the Font awesome icons to any specific .class or #div

	
.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;
}		
	
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x