Hello all,
I would to import Google material design in my ionic app. When i used ionic serve command line i can see icons but when i run on Android device i can’t see icons.
Also this is my font-face declaration, i used it in my app.scss file
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(../assets/fonts/material-icons.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
also my declaration in home.html
<i class="material-icons icon-arrivee">flight_land</i>
Please i need help
Best Regards
1 Like
This is how I imported my fonts, instead of putting the imports in app.scss I put them in src/theme/variables.scss
This is how I imported them
@font-face {
font-family: 'opensans';
font-weight: 300;
font-style: normal;
src: url('../assets/fonts/OpenSans-Regular.ttf') format('truetype'),
}
Then to use it (in my case I was overwriting all android fonts)
$font-family-md-base: "opensans";
Hello philipgriffin,
thank for your replie but in case i don’t use font for text but i would to use icon font. How i can tell ionic to add my custom icon in all generated platform.
When i start my ionic serve command, ionic show custom icon, but when i export to ios or android platform ionic doesn’t show my custom icon.
Regards,
Did you try adding it to your src/theme/variables.scss instead of the app.scss
Hello philipgriffin,
I have added my code into src/theme/variables.scss and i get the same error. In my browser i can see icon, when i export to android platform i see a icon name not a svg image.
Regards,
Somone can help me to solve my issue ?
Regards,
Nothing seem to work with custom font when building with the latest ionic
Hello jeffreyCarre,
Finally i used ionic default icons for my app. But i can add fontAwesome icons in my app ?
Regards,
All the updates are stable now
Well there was some issues with the last Ionic updates + other dependencies that are fixed now. So any iconSet module or any fonts should be working now.
tested with :
For other custom font-icons
(or any other custom fonts)
I had to create the .EOT, .WOFF, .WOFF2 and .TTF using transfonter.org, put them in src/assets/fonts
and for every version of the font according to the font-weight
i had to put a @font-face
declaration in theme\variable.scss
like this :
$font-path: "../assets/fonts";
...
@font-face {
font-family: "Raleway";
src: url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.eot");
src: local("Raleway ExtraBold Italic"), local("Raleway-ExtraBoldItalic"),
url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.eot?#iefix") format("embedded-opentype"),
url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.woff2") format("woff2"),
url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.woff") format("woff"),
url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.ttf") format("truetype");
font-weight: 800;
font-style: italic;
}
Its working on both serve and build ( even --prod)
1 Like