html - How to add new flaticons to my website? -
i have website template uses flaticons. has folder files flaticon.css, flaticon.eot, flaticon.ttf, flaticon.svg, flaticon.woff , others. can use icons importing css page , doing <i class="flaticon-world-grid">
.
now want download new flaticons , use them on site. found on flaticon.com , gives me option download in multiple formats. how "install" these files , edit css can use new icons ones there?
the css file has content this:
.flaticon-wand2:before { content: "\e0fb"; } .flaticon-wealth:before { content: "\e0fc"; } .flaticon-website34:before { content: "\e0fd"; } .flaticon-world-grid:before { content: "\e0fe"; }
which format should download, put new files, , add css file able use them?
as mentioned here can use 2 or more font-face, different font-family name.
like this:
@font-face { font-family: "flaticon"; src: url("../fonts/flaticon.eot"); src: url("../fonts/flaticon.eot?#iefix") format("embedded-opentype"), url("../fonts/flaticon.woff") format("woff"), url("../fonts/flaticon.ttf") format("truetype"), url("../fonts/flaticon.svg#flaticon") format("svg"); font-weight: normal; font-style: normal; } [class^="flaticon-"], [class*=" flaticon-"] { /* use !important prevent issues browser extensions change fonts */ font-family: flaticon !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; } .flaticon-arrows:before { content: "\f100"; } .flaticon-back:before { content: "\f101"; } /** new fonts add */ @font-face { font-family: "flaticon1"; src: url("../fonts/flaticon1.eot"); src: url("../fonts/flaticon1.eot?#iefix") format("embedded-opentype"), url("../fonts/flaticon1.woff") format("woff"), url("../fonts/flaticon1.ttf") format("truetype"), url("../fonts/flaticon1.svg#flaticon") format("svg"); font-weight: normal; font-style: normal; } @media screen , (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "flaticon1"; src: url(".../fonts/flaticon1.svg#flaticon") format("svg"); } } [class^="flaticon1-"]:before, [class*=" flaticon1-"]:before, [class^="flaticon1-"]:after, [class*=" flaticon1-"]:after { font-family: flaticon1; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; } .flaticon1-shapes:before { content: "\f100"; } .flaticon1-share:before { content: "\f101"; }
Comments
Post a Comment