Currently, I am in the process of developing a mobile application with IONIC 2. Within this app, there is a group of buttons present, three of which utilize the standard Ionicons resources. However, one button stands out as it incorporates a custom image of a key. Unfortunately, this particular image does not appear to be scaled correctly based on my observations.
https://i.sstatic.net/1trLV.png
The following showcases my code:
scss:
.buttons .key {
background-color: #de574b;
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
.ion-ios-key::before, .ion-md-key::before {
max-height: 20px;
align-content: center;
vertical-align: center;
content: url('../../img/Key.png');
}
html:
<div class="buttons">
<button class="bluetooth">
<ion-icon name="bluetooth"></ion-icon>
</button>
<button class="help">
<ion-icon name="md-help"></ion-icon>
</button>
<button class="key">
<ion-icon name="key"></ion-icon>
</button>
<button class="new" (click)="newDevice()">
<ion-icon name="md-add"></ion-icon>
</button>
</div>
I have tried using the max-height property along with a height property, but neither seem to affect the icon's appearance. Does anyone know how to properly style this icon so that it blends in seamlessly with the rest?