标签图标的svg格式的矢量图片
打开icoMoon网站去制作字体文件。
解压下载的文件,将其中字体的文件夹拷贝到ionic2项目的src/资产类目录下,并且将其目录下的styles文css件命名为wecare.scss(这个名称是你字体的文件名称),再将其拷贝到ionic2项目的src/资产/字体目录下。下来我们去修改我们关心。scss文件。
修改@font-face中的引用地址。
美元字体路径:“. ./资产/字体”;
@font-face {
粗细:正常;
字体样式:正常;
字体类型:“我们关心”;
src: url(" #{$字体路径}/wecare.eot& # 63; l80w4l”);
src: url(" #{$字体路径}/wecare.eot& # 63; l80w4l # iefix ')格式(“embedded-opentype”),
url(" #{$字体路径}/wecare.ttf& # 63; l80w4l”)格式(“truetype”),
url(" #{$字体路径}/wecare.woff& # 63; l80w4l”)格式(woff的),
url(" #{$字体路径}/wecare.svg& # 63; l80w4l #我们关心的)格式(svg);
}
修改字体的公共样式部分的选择器
原代码
(类^=袄胱印?,(类*=袄胱印?{/*使用!重要的防止浏览器扩展的问题,改变字体*/字体类型:“我们关心”!重要;
说:没有;
字体样式:正常;
粗细:正常;
字体参数:正常;
首字母:没有;
行高:1;/*更好的字体渲染===========*/-webkit-font-smoothing:平滑;
-moz-osx-font-smoothing:灰度;
}
修改后
.wecare {
首字母:没有;
粗细:正常;
字体样式:正常;
字体参数:正常;
字体类型:“我们关心”!重要;
行高:1;/*更好的字体渲染===========*/-webkit-font-smoothing:平滑;
-moz-osx-font-smoothing:灰度;
说:没有;
}
.ion-ios-smart-outline:之前,
.ion-ios-smart:之前,
.ion-md-smart-outline:之前,
.ion-md-smart:之前,
.ion-ios-test-outline:之前,
.ion-ios-test:之前,
.ion-md-test-outline:之前,
.ion-md-test:{之前
@extend .wecare;
}
注:将一个通用的选择器改为一个类,然后让被应用的类去继承,是因为使用[类^=袄胱印盷,[类*=袄胱印?来选择时会影响到ionic2自带的图标库,这也是ionic2字体库的写法。
字体的引用
.ion-ios-smart-outline:{之前
内容:“\ e904”;
}
.ion-ios-smart:{之前
内容:“\ e905”;
}
.ion-md-smart-outline:{之前
内容:“\ e904”;
}
.ion-md-smart:{之前
内容:“\ e905”;
}
.ion-ios-test-outline:{之前
内容:“\ e900”;
}
.ion-ios-test:{之前
内容:“\ e901”;
}
.ion-md-test-outline:{之前
内容:“\ e900”;
}
.ion-md-test:{之前
内容:“\ e901”;
}
注:在ionic2中引用图标主要靠名称来引用,它会根据平台自动添加前缀如ios或android (.ion-ios-smart.ion-md-smart),所以我们必须为ios与android各写一个类名,其中像.ion-ios-test-outline这种是标签未被选中时的样式。
将我们的sass文件导入src/主题/变量。scss,然后就可以在标签中使用了。
@ import“. ./资产/字体/我们关心”;
& lt; ion-tabs>
& lt; ion-tab(根)=" tab1Root " tabTitle=跋衷凇眛abIcon=安馐浴弊４? lt;/ion-tab>
& lt; ion-tab(根)=" tab2Root " tabTitle=捌拦馈眛abIcon=靶畔⑷Α弊４? lt;/ion-tab>
& lt; ion-tab(根)=" tab3Root " tabTitle=扒魇啤眛abIcon=傲等恕弊４? lt;/ion-tab>
& lt; ion-tab(根)=" tab4Root " tabTitle=爸悄堋眛abIcon=爸悄堋弊４? lt;/ion-tab>
& lt; ion-tab(根)=" tab5Root " tabTitle=吧柚谩眛abIcon=傲等恕弊４? lt;/ion-tab>
& lt;/ion-tabs>
在ionic2中android的标签图标选中与未选中只能使用一张svg图片,只是颜色不同。如果我们想要像在ios中一样选中与未选中使用不同的图标,就不能办的到。我们的项目的需求就是这样,我不得已只能去看ionic2关于标签与标签的源码,找到解决问题的方法。我们应该知道在ios中它是通过大纲的后缀来控制显示未选中的图标。起初我看了标签与标签的源码,没有找到关于这个问题的部分。最后在图标的源码中找到了关于这个问题的部分代码。
