I am using ionic to develop my next android app. I wanted to use icons which were not provided by ionicons. Following are the steps, which can help to easily add new font icons to your app.
1. Create .svg file using tool like Adobe illustrator
2. Create fonts file using tool like Icomoon and save those files in the www\fonts folder
3. In the file www\css\styles.css , add
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.custom-order:before {
display: inline-block;
font-family:"icomoon"; /* "Ionicons";*/
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.custom-order:before {
content: "\e900"; }/* e900 is the icon, I need for orders.*/
4. add custom-order in the tabs.html in place of previous icon.
ion-tab title="Orders" icon-off="custom-order" icon-on="custom-order"
You can use these fonts similarly across the application.
1. Create .svg file using tool like Adobe illustrator
2. Create fonts file using tool like Icomoon and save those files in the www\fonts folder
3. In the file www\css\styles.css , add
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.custom-order:before {
display: inline-block;
font-family:"icomoon"; /* "Ionicons";*/
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.custom-order:before {
content: "\e900"; }/* e900 is the icon, I need for orders.*/
4. add custom-order in the tabs.html in place of previous icon.
ion-tab title="Orders" icon-off="custom-order" icon-on="custom-order"
You can use these fonts similarly across the application.
hi can you send the code
ReplyDeleteLet me know, where you are stuck and I can help you.
Delete