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