生成圖標(biāo)
準(zhǔn)備好項(xiàng)目需要使用的圖標(biāo)，需為svg格式
https://icomoon.io/app/ 進(jìn)入iconmoon網(wǎng)址
-
點(diǎn)擊左上角漢堡包按鈕欢策，新建一個(gè)空的項(xiàng)目
image.png -
點(diǎn)擊項(xiàng)目右側(cè)漢堡包添加自定義的圖標(biāo)仔戈，第一項(xiàng)可修改項(xiàng)目名
image.png -
選中所有圖標(biāo)关串，選中g(shù)enerate font,
image.png -
修改完圖標(biāo)的名字后，下載
image.png -
下載后的文件中我們需要用到的是font以及style.css
image.png
項(xiàng)目應(yīng)用 （底部附有完整代碼）
- 將font文件添加到assets中
- style.css改為icons.scss放在theme文件里（名字隨意改监徘，看心情）
-
對(duì)icons.scss路徑修改
image.png
image.png
image.png
image.png
-
最后一步晋修，在app.scss中引用 。至此凰盔，大功告成
image.png
另外墓卦，有幾點(diǎn)需要注意的
- 文件中的yes是個(gè)人添加的前綴，在圖標(biāo)應(yīng)用的時(shí)候應(yīng)加上這個(gè)前綴户敬，例如
<ion-tab [root]="tab1Root" tabTitle="我的名片" tabIcon="yes-my-cart"></ion-tab>
-
名字和code一定要對(duì)上
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');
