Add flaticon, as custom font in project, does'nt work


#1

Hi,
I’d like to use flaticons in my app, but not for replace Ionic. For example . So I’ve copied font files to assets/fonts. Then I’ve created a file icons.scss in theme folder

font-family: "Flaticon";
src: url("'../assets/fonts/flaticon1.eot");
src: url("'../assets/fonts/flaticon1.eot#iefix") format("embedded-opentype"),
url("'../assets/fonts/flaticon1.woff") format("woff"),
url("'../assets/fonts/flaticon1.ttf") format("truetype"),
url("'../assets/fonts/flaticon1.svg") format("svg");
font-weight: normal;
font-style: normal;
}

In app.scss a line to import: @import "…/theme/icons"
And in variable.scss:

[class^="flaticon-"]::before, [class*=" flaticon-"]::before, [class^="flaticon-"]::after, [class*=" flaticon-"]::after {
  font-family: "Flaticon";      
  margin-left: 0;
    }

.flaticon-thermometer67:before ,
 .ion-ios-flaticon-thermometer67:before ,
 .ion-ios-flaticon-thermometer67-outline:before ,
 .ion-md-flaticon-thermometer67:before ,
 .ion-md-flaticon-thermometer67-outline:before {
 content: '\e916';
 }

But it does not work… The icons does not appear. I believe that maybe font is not loaded, because when I look at element the css seems OK. Any ideas?

Thank you!


#2

Just answering in case anyone else is looking for an answer to this issue.

I managed to make it work with the following:

  1. Renamed my flaticon.css to flaticon.scss
  2. At the beggining of the flaticon.scss I added $flaticon-font-path: $font-path !default;
  3. Replaced “…/assets/fonts/” with “$flaticon-font-path”.
    Example.:
    src: url("…/assets/fonts/flaticon1.eot");
    src: url("#{$flaticon-font-path}/flaticon1.eot");

I hope it helps


#3

From a performance perspective it would be much better to only include the icons (e.g., SVG’s -> ‘data:image/svg+xml;utf8,<svg … >’) you actually use.

See: