Ensure your CSS file includes the following:
@font-face
{
font-family: "Flaticon";
src: url("../icons/Flaticon.eot");
src: url("../icons/Flaticon.eot?#iefix") format("embedded-opentype"),
url("../icons/Flaticon.woff") format("woff"),
url("../icons/Flaticon.ttf") format("truetype"),
url("../icons/Flaticon.svg#Flaticon") format("svg");
font-weight: normal;
font-style: normal;
}
//instructions for displaying icons on a website like fa fa-...
.fa
{
display: inline-block;
font-family: Flaticon;
font-weight: normal;
font-style: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
//list of available icon names
.fa-clock:before { content: "\f100"; }
.fa-cross:before { content: "\f101"; }
.fa-facebook:before { content: "\f102"; }
.fa-google-plus:before { content: "\f103"; }
.fa-hamburger:before { content: "\f104"; }
.fa-left-arrow:before { content: "\f105"; }
.fa-linked-in:before { content: "\f106"; }
.fa-location:before { content: "\f107"; }
.fa-phone:before { content: "\f108"; }
.fa-right-arrow:before { content: "\f109"; }
.fa-star:before { content: "\f10a"; }
.fa-twitter:before { content: "\f10b"; }
.fa-up-arrow:before { content: "\f10c"; }
- If you are missing .woff, .eot, .svg, .ttf files, consider reaching out to TemplateMonster or explore free icon options.
I recommend visiting flaticon.com, selecting some free icons, and downloading the "Icon Font" (crucial step). There are various options available, simply credit the icons to ... from flaticon.com ;)
Feel free to ask if you need more assistance!