Hi, since I added my own icons font (I didn’t remove anything from Ionic). Ionic icons are not showing properly. I am getting this now in the searchbar’s back icon which I need to correct an also to change its color once it’s fixed if someone knows how:
What changes did you make?? And code please.
Icon is not loaded. share your code
The only code I can share is my variables.scss
since I just changed that when I started my project to add more icons. The rest is just a normal searchbar
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/
$font-path: "../assets/fonts";
$font-family-md-base: "Montserrat";
$font-family-ios-base: "Montserrat";
$font-family-wp-base: "Montserrat";
@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/v2/theming/overriding-ionic-variables/
$text-color: #000;
$background-color: #fff;
// $ion-navbar-ios-height: '200px';
// $ion-navbar-md-height: '200px';
// $ion-navbar-wp-height: '200px';
$toolbar-ios-height: 70px;
$toolbar-md-height: 70px;
$toolbar-wp-height: 70px;
// 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: #0079c8,
primary75: #409bd6,
primary50: #7fbce3,
primary25: #bfddf1,
secondary: #00335b,
danger: #f53d3d,
light: #f4f4f4,
dark: #000,
blanco: #fff,
gris: #6c6e71,
gris75: #919295,
gris50: #b5b6b8,
gris25: #dadbdb,
);
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$searchbar-ios-background-color: white;
$searchbar-ios-input-search-icon-color: map-get($colors, primary);
$searchbar-ios-input-search-icon-size: 20px;
$searchbar-ios-input-height: 4rem;
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$searchbar-md-background-color: white;
$searchbar-md-input-search-icon-color: map-get($colors, primary);
$searchbar-md-input-search-icon-size: 30px;
$searchbar-md-input-height: 5rem;
// 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/v2/ionicons/
//$ionicons-font-path: "../assets/fonts";
@import "ionic.ionicons";
@import "bupaicons";
// Fonts
// --------------------------------------------------
@import "roboto";
@import "noto-sans";
This doesn’t helps as no backbutton related values are there.
It is a fresh project, there is nothing, just my added variables and a normal searchbar. I can’t give you anything else
In that case just try inspect element in chrome, you may find a way out.
this class is what seems to be broken, the one related to the icon:
ion-md-arrow-back
Can you screenshot it and post the class and its properties.
this is the only thing i can get from the inspector which adds nothing:
.ion-md-arrow-back:before {
content: "\f27d";
}
ok it seems this is what’s causing trouble, what can I do? it’s something my company makes us put. This is a global css, the font-family is what’s messing thigs up:
i, .icon { /* use !important to prevent issues with browser extensions that change fonts */
font-family: "bupaicons" !important;
speak: none;
font-style: normal !important;
font-weight: normal;
font-variant: normal;
text-transform: none;
vertical-align: middle;
line-height: 1.1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Ok problem is the project had : @import "ionic.ionicons";
instead of @import "ionicons";
in variables.scss
That’s great you solved it.