Я создаю кроссплатформенное приложение с Nativescript и Angular .
У меня был собственный значок шрифта, который я хочу использовать. У меня было несколько svg файлов, которые я превратил в ttf файл. Когда я использую символы с их кодом Unicode, он ничего не показывает.
То, что я сделал, это:
Поместите ttf file в /src/fonts/icomoon.ttf (тот же уровень приложения)
Вставьте этот код в app.css файл
.ico {
font-family: icomoon, icomoon;
font-weight: normal;
}
В файле home.component.html я использую его так:
<!-- other stuff -->
<Label row="0" col="1" text="&#E904;" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />
Где я не прав? Я что-то пропустил?
P.S .: коды Unicode идут от e900 до e907
P.P.S: Я уже использовал Fontawesome, и он работает с этим кодом. Теперь я хочу использовать свой собственный шрифт, и этот код не работает.
EDIT
Я пользуюсь этим руководством и я что-то изменил.
В home.component.html файле у меня есть:
<Label row="0" col="1" [text]="'ico-link' | fonticon" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />
Я добавил файл app/assets/icomoon.css, в который я положил это:
font-family: 'icomoon';
src: url('../../fonts/icomoon');
src: url('../../fonts/icomoon') format('embedded-opentype'), url('../../fonts/icomoon') format('woff2'), url('../../fonts/icomoon') format('woff'), url('../../fonts/icomoon') format('truetype'), url('../../fonts/icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.ico {
display: inline-block;
font: normal normal normal 14px/1 icomoon;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ico-link:before {
content: "\ue904";
}
и в app.ts я добавил:
@NgModule({
bootstrap: [
AppComponent
],
imports: [
//...
TNSFontIconModule.forRoot({
'ico': './assets/icomoon.css'
})
]
//...
});
После всего этого он все еще не работает. Значок не отображается.