ionic3使用阿里矢量图标库

• 登录Iconfont官网

• 搜索图标并加入购物车

image.png

-点击‘添加至项目’ 把图标添加到项目中，没有项目要自己创建项目

image.png

• 将项目文件下载到本利并打开

image.png

• 将字体放到你的项目中

image.png

将这些文件放在项目的assets/img/tab中

image.png

-在你的项目中tabs.scss中添加如下代码

@font-face {font-family: "Ionicons";
  src: url('../assets/img/tab/iconfont.eot'); /* IE9*/
  src: url('../assets/img/tab/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../assets/img/tab/iconfont.woff') format('woff'), /* chrome, firefox */
  url('../assets/img/tab/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../assets/img/tab/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.ion-qq1:before { content: "\e600"; }

image.png

• 应用如下：

    
      
        
           
          {{c.FavoritesTitle}}
        
      
    
  

image.png

• tab 使用的话

  
  
  

  image.png

image.png