1
votes

We are trying to implement custom fonts to our sencha app by using the Bruno tutorial. (http://bruno.tavares.me/sencha-touch/adding-custom-font-icons-to-sencha-touch-2-2/). However, I'm encountering problems with including the fonts.

This is our scss file:

$base-color: #FF9600;
$toolbar-base-color: $base-color !default;

@include icon-font('app_fill', inline-font-files(
  'app_fill/app_fill_all.woff', woff,
  'app_fill/app_fill_all.ttf', truetype,
  'app_fill/app_fill_all.svg', svg
));

@include icon("menu"  , "\e009", "app_fill");
@include icon("star"  , "\e001", "app_fill");

$toolbar-gradient:false;
$list-bg-color: #ffffff;
$list-active-color: #f8f8f8 !default;
$list-pressed-color: $list-active-color;

$panel-border-radius: 0em; 

$sheet-bg-gradient: #ffffff;

@import 'sencha-touch/default';
@import 'sencha-touch/default/all'; 

@include sencha-button-ui('segment', #007aff, false);
@include sencha-toolbar-ui('segment', #007aff, false);

Now We are getting an error on line 8:

error app.scss (Line 8: Undefined mixin 'icon-font'.)

I can't figure out what is wrong. Both the tutorial and mij touch are version 2.2.1 compass is running properly.

1

1 Answers

0
votes

Import the base mixins before using icon-font:

 @import 'sencha-touch/base';