My footer has a bar:
<div class="crop modal">
<div class="crop-center-container">
<div class="crop-img" ng-style="{width: width + 'px', height: height + 'px'}"></div>
</div>
<div class="crop-center-container">
<div class="crop-select" ng-style="{width: width + 'px', height: height + 'px'}"></div>
</div>
<div class="bar bar-footer bar-dark">
<div class="button-bar">
<button class="button button-clear crop-button icon ion-ios-close" ng-click="cancel()"></button>
<button class="button button-clear crop-button icon ion-ios-undo"></button>
<button class="button button-clear crop-button icon ion-arrow-left-a"></button>
<button class="button button-clear crop-button icon ion-ios-redo"></button>
<button class="button button-clear crop-button icon ion-ios-checkmark" ng-click="crop()"></button>
</div>
</div>
</div>
Icons are used in the design. According to Ionic documentation, I can adjust the icon size using the font-size property. I attempted to do this:
.crop {
background-color: #000;
overflow: hidden;
}
.crop-center-container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
}
.crop-img {
opacity: 0.6;
}
.crop-select {
overflow: hidden;
}
.crop-button {
font-size: 100px !important;
}
.bar.bar-footer {
border: none;
background-color: transparent;
background-image: none;
}
Although I tried setting the font-size to 50px, the icon size does not change. I am unable to adjust the size of the icons. What steps should I take to modify them?