ionic3 自定义图标及应用

生成图标

• 准备好项目需要使用的图标，需为svg格式

• https://icomoon.io/app/ 进入iconmoon网址

• 点击左上角汉堡包按钮，新建一个空的项目

  
  image.png

• 点击项目右侧汉堡包添加自定义的图标，第一项可修改项目名

  
  image.png

• 选中所有图标，选中generate font,

  
  image.png

• 修改完图标的名字后，下载

  
  image.png

• 下载后的文件中我们需要用到的是font以及style.css

  
  image.png

项目应用 （底部附有完整代码）

• 将font文件添加到assets中
• style.css改为icons.scss放在theme文件里（名字随意改，看心情）

• 对icons.scss路径修改

  
  image.png

image.png
image.png
image.png

• 最后一步，在app.scss中引用 。至此，大功告成

  
  image.png

另外，有几点需要注意的

1. 文件中的yes是个人添加的前缀，在图标应用的时候应加上这个前缀，例如

<ion-tab [root]="tab1Root" tabTitle="我的名片" tabIcon="yes-my-cart"></ion-tab>

2. 名字和code一定要对上

   
   image.png

@font-face {
  font-family: 'icomoon';
  src:  url('../assets/fonts/icomoon.eot?m120q3');
  src:  url('../assets/fonts/icomoon.eot?m120q3#iefix')       format('embedded-opentype'),
  url('../assets/fonts/icomoon.ttf?m120q3') format('truetype'),
  url('../assets/fonts/icomoon.woff?m120q3') format('woff'),
  url('../assets/fonts/icomoon.svg?m120q3#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

  [class^="ion-ios-yes"], [class*=" ion-ios-yes"] ,
  [class^="ion-md-yes"], [class*=" ion-md-yes"]
{
/* use !important to prevent issues with browser       extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin makeIcon($arg, $val) {
  .yes-#{$arg}:before,
  .ion-ios-yes-#{$arg}:before ,
  .ion-md-yes-#{$arg}:before   {
    content: $val;
    // font-size: 26px;
  }
}

@mixin makeOutlineIcon($arg, $val) {
   .yes-#{$arg}:before ,
   .ion-ios-yes-#{$arg}:before ,
   .ion-ios-yes-#{$arg}-outline:before ,
    .ion-md-yes-#{$arg}:before ,
    .ion-md-yes-#{$arg}-outline:before  {
    content: $val;
  //   font-size: 26px;
  }
}



@include makeOutlineIcon(arrow-back,'\e900');
@include makeOutlineIcon(arrow-forward,'\e901');
@include makeOutlineIcon(list,'\e902');
@include makeOutlineIcon(wx,'\e903');


@include makeIcon(arrow-back,'\e900');
@include makeIcon(arrow-forward,'\e901');
@include makeIcon(list,'\e902');
@include makeIcon(wx,'\e903');