silvia zulinka silvia zulinka - 24 days ago 58
CSS Question

How to load font awesome in fonts directory?

I can't load font awesome in fonts directory, in font awesome there is icon style like :

.fa-star:before {
content: "\f005";
}


I want to get content: "\f005"; and put in my own style, but I think the directory fonts not load, how to load font awesome file in directory fonts?

I have try to add this code to my style:

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}


and copy fonts folder.

here my style code:

.example li a:before {
float: left;
font-size: 10px;
content: "\f005";
}


here my directory structure

- assets
-- css
mystyle.css
-- fonts
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2

Answer

just add font-family for your custom class

.fa-star{
    font-family: 'FontAwesome';
}

.fa-star:before {
    content: "\f005";
}
Comments