html - 显示正方形的离子自定义图标

Question

根据我关注的博客， https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/

我将正确的自定义图标导入到我的 Ionic 3 应用程序中；但是，我的 ion-tab 上的自定义图标显示了交叉的矩形（或正方形），其中没有正确显示这些图标。

这是我的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>

标签： htmlsvgsassionic3icons

Answer 1

经过长时间检测小故障后，我发现这不是字体包的 url。所以我将网址更改为“../assets/fonts/icomoon.eot/.....”等等......它呈现了我的自定义字体

所以我改变了这段代码：

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');

至

src:  url('../assets/fonts/icomoon.eot?8fl4ud');
src:  url('../assets/fonts/icomoon.eot?8fl4ud#iefix') format('embedded-opentype'),
    url('../assets/fonts/icomoon.ttf?8fl4ud') format('truetype'),
    url('../assets/fonts/icomoon.woff?8fl4ud') format('woff'),
    url('../assets/fonts/icomoon.svg?8fl4ud#icomoon') format('svg');