引入步骤
- 从阿里巴巴矢量图标库导出字体文件夹
- 将图标添加至购物车,点击购物车添加至项目
- 在项目里直接下载
- 会将所有的图标下载下来
- 解压下载文件,将所有带iconfont的文件(js有时不需要)放入项目中
- 在src/assets下边建一个fonts文件夹将文件放入这里
- 然后将下载文件中附带的iconfont.css文件里的东西放入路径为src/app/app.scss的文件里(需要更改下边有解释)
- 也可以不放进里边,只需要将该iconfont.css文件重命名为scss文件,然后在src/app/app.scss里边导入该文件
- @import ‘../assets/fonts/iconfont.scss’;(导入)
- 将文件导入项目后,需要对iconfont.scss也就是iconfont.css文件里边的内容进行修改。(修改如下)
@font-face {
font-family: "Ionicons";
src: url('iconfont.eot?t=1505467226459');
src: url('iconfont.eot?t=1505467226459#iefix') format('embedded-opentype'), url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1505467226459') format('truetype'), url('iconfont.svg?t=1505467226459#iconfont') format('svg');
}
.icon {
font-family: "Ionicons" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ion-md-pk:before,
.ion-ios-pk:before,
.ion-ios-pk-outline:before {
content: "\e979";
}
.ion-md-works:before,
.ion-ios-works:before,
.ion-ios-works-outline:before {
content: "\e647";
}
对了,@font-face里的数据来源于之前引入的其他文件,但是当多次在阿里下载时它的命名是一样的,所以当再次引入图标时需要更改文件名。同时需要在新引入的@font-face里的url里更改名字。
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="works"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="pk"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>