kankamuso kankamuso - 1 year ago 101
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>


Answer Source

Here is a plunker for the reduced chevron size.


This is the css that you need.

.bar .button.button-clear .icon:before{
  font-size: 12px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download