生成图标
准备好项目需要使用的图标，需为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
另外，有几点需要注意的
- 文件中的yes是个人添加的前缀，在图标应用的时候应加上这个前缀，例如
<ion-tab [root]="tab1Root" tabTitle="我的名片" tabIcon="yes-my-cart"></ion-tab>
-
名字和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');
