CODEWITHSUNDEEP
htmlcss
Umer Usman
Umer Usman

Reputation: 150

where the icons are saved in template?

Hello first of all thanks for giving time to my question, I've a template here: http://www.templatemonster.com/demo/58725.html

On the top left side there is a icon of home, i've copied full website but icons is missing in my file, even I've copied full images, css and js files. When I inspect element i see the span with class:

<span class="icon fl-continuous-house150"></span>

I know this class is handling icon but can't figure out why it's not showing icon in my copy even css is there. please tell me if I'm missing something.

Upvotes: 0

Views: 2386

Answers (1)

Stefan Stefko
Stefan Stefko

Reputation: 390

You should have CSS file like this:

@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;
}

//how to display icons on 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;
}

//names of implemented icons

.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"; }
  1. If you don't have files .woff , .eot, .svg, .ttf i reccomand to write an email to TemplateMonster or just download some free icons

I really reccomand you to go to the flaticon.com, choose some free icons and download "Icon Font" (very important). They have multiple of them and you should just write in footer or something, that icons was made by ... from flaticon.com ;)

Hope i helped

Upvotes: 1

Related Questions