Sencha Touch 2.4实现自定图标指南

通过研究官方文档和时间总结得出，网上很多不是版本不对就是环境不正确。

阅读本文你需要了解一些基础知识:字体图标、Data Uri schema、sass

环境

     sencha touch sdk:touch-2.4.1

     Sencha Cmd:v4.0.5.87

前言(来自官方手册)：

       

Adding Your Own Icons to Your Application

As of Sencha Touch 2.2.x webmasks for icons are no longer supported. Instead Touch now uses the much more flexible and faster webfonts. Configuring your application with new icons using Webfonts is simple.

1. Create your own webfont file in WOFF, truetype, or SVG format. Sites like fontello let you select,create, and download your custom webfont file.Put your webfont in the default location of theresources/sass/stylesheets/fonts/ directory.

2. Include the webfont file into this Sass file using the @include icon-font mixin statement. Once downloaded, incorporate the font file into your Compass files using the @font-face mixin:

   
       
       
   
        
        
   
         
         
   
          
          
   
         
         
         
         
   
         
         
   
          
          
   
           
           @
           
           include 
           
           font
           
           -
           
           face
           
           (
           
           '_fontName_'
           
           , 
           
           inline
           
           -
           
           font
           
           -
           
           files
           
           ([
           
           '_filename_'
           
           , 
           
           _filetype_
           
           ]
           
           *
           
           ))
           
           ;
          
          
         
         
         
         
   
         
         
   
          
          
   
         
         
        
        
       
       
       
       
   
        
        
   
        
        
   
       
       

   Where:

   • fontName is the name of your webfont.
   • filename and filetype are the path and type of the webfont file. Valid filetypes are the woff,ttf, or svg values.

3. Define your icon class names found in your font file using the @include icon mixin statement. Once added to this Compass file,define a name for each icon within the file using a unique name to access the icon.Using the icon mixin you define the icon:

   
        
        
   
         
         
   
          
          
   
           
           
   
          
          
          
          
   
          
          
   
           
           
   
            
            @
            
            include 
            
            icon
            
            (
            
            '_iconName_'
            
            , 
            
            '_index_'
            
            , 
            
            '_fontName_'
            
            )
            
            ;
           
           
          
          
          
          
   
          
          
   
           
           
   
          
          
         
         
        
        
        
        
   
         
         
   
         
         
   
        
        

   Where:

   • iconName is the unique name for the icon you are referencing.
   • index is the index (letter or hexcode) into the webfont file the icon is to be found.
   • fontName is the name you gave your webfont file in step 2.

4. Compile your Compass files from the directory that this file found using thecompass compilecommand

Example:

If you use an online service to create and download yourown webfont file, this example shows the commands to insertin the app.scss file in your project to addand utilize fonts found in a font file namedresources/sass/stylesheets/fonts/myfonts/myFonts.woff under your app directory:

  
  

   
   

    
    

     
     

    
    
    
    

     
     

    
    
    
    

     
     

      
      @
      
      include 
      
      font
      
      -
      
      face
      
      (
      
      'myFonts'
      
      , 
      
      inline
      
      -
      
      font
      
      -
      
      files
      
      (
      
      'myfonts/myFonts.woff'
      
      , 
      
      woff
      
      ))
      
      ;
     
     
     
     

      
      @
      
      include 
      
      icon
      
      (
      
      'house'
      
      , 
      
      '
      
      \002
      
      '
      
      , 
      
      'myFonts'
      
      )
      
      ;
     
     
     
     

      
      
     
     
    
    
    
    

    
    

     
     

     
     

     
     

    
    
   
   
  
  
  
  

   
   

   
   

  
  

我的操作步骤:

  我选择icomoon制作字体图标:

   1、登录地址:https://icomoon.io/

   

  2、点击右上角的IconMoon App,进度的界面可以选择免费的icon字库:

  

 点击IcoMoon -Free 可以看到提供的免费icon

  

  3、这当然不是所有，想要更多?没有问题,点击" Add Icons From Library…"

  

 点击"+ Add"可以选择这个库

 4、选择后回到先前的界面，在下面这个界面鼠标选择你需要的icon,选择好后，点击右下角的Generate Font

 

 然后会生成一个下载文件xxx.zip，

 5、解压缩下载的字体压缩文件，将里面的fonts目录下的所有字体文件(xxx.eot,xxx.ttf,xxx.svg,xxx.woff)拷贝到如下目录"yourapp\resources\sass\stylesheets\fonts\自己命名字体目录名\"下,比如我的地址为"D:\Sencha\myapp\resources\sass\stylesheets\fonts\icomoon\"

 6、根据官方说明修改这个文件:yourapp\resources\sass\app.scss

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


// Custom code goes here..下面是添加的内容
@include icon-font('icomoon',inline-font-files('icomoon/icomoon.woff',woff,'icomoon/icomoon.svg',svg,'icomoon/icomoon.eot',eot,'icomoon/icomoon.ttf',truetype));
@include icon('home2','\e901','icomoon');

//home2就是我引用的字体图标

// Examples of using the icon mixin:
// @include icon('user');

  7、接下来的步骤，和官方说明不同

   在你的app目录下执行 sencha app build命令，会重新生成新的app.css覆盖原来路径下的“yourapp\resources\css\app.css”

   但是生成的app.css是压缩版本，如果你想看到非压缩版本，请修改"yourapp\resources\sass\config.rb",如下:

  # Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)


# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'touch', 'resources', 'themes')


# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")


# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production

###修改上面的compressed为nested，这个值是SASS提供的编译风格，有4个值可以选择:

###* nested：嵌套缩进的css代码，它是默认值。

###* expanded：没有缩进的、扩展的css代码。

###* compact：简洁格式的css代码。
###* compressed：压缩后的css代码

8、回到app根目录,执行sencha app build,然后查看app.css尾部：

  

  观察下班部分@font-face和下面的.home2，大功告成，你可以在sencha中使用 home2这个字体图标了