kankamuso kankamuso - 3 months ago 11
AngularJS Question

Smaller icon on button on bar-subheader

I have this code for an Ionic app bar-subheader. It does work well but the chevron icon is a bit too big. I have not been able to reduce its size (to half the default size. I have tried to inline the stile with text size but it has no effect on the icon but on the text. I have read some solutions suggesting to use non-inlined CSS but I don't really understand the differences and, as I am just making tests, I prefer to inline it. Any hints?

<div class="bar bar-subheader">
<button class="button icon-left button-clear button-dark" ng-hide="hidePrevious" ng-click="previousDay()"><i class="icon ion-chevron-left"></i> {{previousDayTitle}} </button>
<h1 class="title"><span style="font-size:30px"> {{todayTitle}} </span></h1>
<button class="button icon-left button-clear button-dark" ng-hide="hideNext" ng-click="nextDay()"> {{nextDayTitle}} <i class="icon ion-chevron-right"></i></button>

</div>

Answer

Here is a plunker for the reduced chevron size.

Plunker

This is the css that you need.

.bar .button.button-clear .icon:before{
  font-size: 12px;
}
Comments