На основе блога, за которым я следовал, https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/
Я следил за правильным импортом пользовательских значков в свое приложение Ionic 3;однако мои пользовательские значки на вкладке «Ион» показывали скрещенные прямоугольники (или квадраты), в которых они не отображаются должным образом.
Вотмой icons.scss код:
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8fl4ud');
src: url('fonts/icomoon.eot?8fl4ud#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8fl4ud') format('truetype'),
url('fonts/icomoon.woff?8fl4ud') format('woff'),
url('fonts/icomoon.svg?8fl4ud#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*="icon-"] {
/* 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;
}
.icon-stopwatch:before,
.ion-ios-icon-stopwatch:before,
.ion-md-icon-stopwatch:before,
.ion-wp-icon-stopwatch:before {
content: "\e900";
color: #fff;
}
.icon-wc_transparent:before,
.ion-ios-icon-wc_transparent:before,
.ion-md-icon-wc_transparent:before,
.ion-wp-icon-wc_transparent:before {
content: "\e901";
color: #fff;
}
variables.scss код:
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: "../assets/fonts";
// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: ltr;
@import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
@import "ionic.theme.default";
// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/
//@import "ionic.ionicons";
@import "ionicons";
// Fonts
// --------------------------------------------------
@import "roboto";
@import "noto-sans";
и мой home.html код:
<!--<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>-->
<ion-content padding>
<ion-tabs class="dash-tabs" #tabSelection name="tabSelection" selectedIndex="1" tabsLayout="title-hide">
<!--<ion-tab [root]="Profile" class="tab-select first-tab" id="tab-p" tabTitle="Profile" tabIcon="person">
</ion-tab>-->
<ion-tab [root]="Profile" class="tab-select first-tab" id="tab-p" tabTitle="Profile" tabIcon="person">
</ion-tab>
<ion-tab [root]="QuickE" class="tab-select" id="tab-q" tabTitle="Quick-E" tabIcon="icon-stopwatch">
</ion-tab>
<ion-tab [root]="Shop" class="tab-select last-tab" id="tab-s" tabTitle="Shop" tabIcon="icon-wc_transparent">
</ion-tab>
</ion-tabs>
</ion-content>