ionic2/3实战-使用阿里巴巴矢量图标库Iconfont

为什么使用阿里巴巴矢量图标库Iconfont

• Iconfont提供了近百万数量的图标,并且有多种使用方式
• 我们要使用字体图标,相对图片占用小,更清晰,大小颜色更易控制
• ionic官方提供的图标不够用,没有具体业务方面合适的图标

如何使用Iconfont

1. 登录Iconfont官网

• 官网提供了github和新浪微博两种登录方式,如果直接用微博登录不上去,那先登录新浪微博,再去Iconfont用微博登录
• 本文是Iconfont web端的详细使用教程,其他使用方式,建议阅读官方帮助文档

• 搜索图标并加入购物车

搜索图标并加入购物车

• 点击右上角购物车图标,在打开的窗口中,点击"添加至项目",没有项目则会提示创建项目

将图标添加至项目

创建项目

• 四种方式
  
  

一.在app中使用自定义字体图标-Iconfont官方方式

1. 效果图

   
   
   

   在app内容区域中使用自定义图标

• 在图标管理-我的项目中编辑图标,并生成图标链接

  
  
  

  Paste_Image.png

• 复制生成的链接并添加到appsrc/index.html文件中.注意:给链接加上http:或https:否则在真机上显示不出来.当然也可以把资源下载到本地进行引用iconfont.css
  

  

  复制生成的css链接
  
  
  

  在index.html添加css链接

• 效果图完整代码如下.注意:这里用的是class,不像ionic图标使用的是name属性

  
    
      Contact
    
  
  



  

    
    
    
    
    
    
    
    
  
  
    
      试验记录
      
    
    
      巡检记录
      
    
    
      
      巡检任务
    
    
      
      试验任务
    
  

二.在tab中使用自定义字体图标-ionic方式

1. 效果图

   
   
   

• 挑选图标并下载到本地

  
  
  

• 复制字体文件到项目中

  
  
  
  
  
  

• 新建一个tab.scss文件,并复制下载的iconfont.css文件的内容到其中
  

  
  
  
  

• 修改后的tab.scss
  

  

• 在tab中使用

  
  
  

• 其实在任何地方都可以用zhifubao和qq,也可以不用新建tab.scss,直接把自定义的css写在src/theme/variables.scss文件中,因为所有的.scss最终编译的css都放在了www/build/main.css文件中
  

  

三.在tab中使用自定义图标-图片方式

1. 效果图

   
   
   

   在tab中使用自定义图标

• 看图看代码

  
  
  
  
  
  
  
  
  
• 上图代码

.ion-ios-my-test:before {
  content: url("../assets/icon/test.png");
}
.ion-ios-my-test-outline:before {
  content: url("../assets/icon/test-outline.png");
}
.tab-button[aria-selected=true] .ion-md-my-test:before {
  content: url("../assets/icon/test.png");
}
.tab-button[aria-selected=false] .ion-md-my-test:before {
  content: url("../assets/icon/test-outline.png");
}

四.在tab中使用自定义图标-svg

• 可以在Iconfont官网上下载svg格式.完整代码可以看这里
  
  

最后

很多人都犯得错误