Kleineres Symbol auf Knopf am Bar-Subheader

Question

Ich habe diesen Code für einen Ionic App Bar-Subheader. Es funktioniert gut, aber das Chevron-Symbol ist ein bisschen zu groß. Ich war nicht in der Lage, seine Größe zu reduzieren (auf die Hälfte der Standardgröße. Ich habe versucht, den Stil mit der Textgröße zu inline, aber es hat keine Auswirkungen auf das Symbol, sondern auf den Text. Ich habe einige Lösungen gelesen, die nicht-inlined verwenden CSS, aber ich nicht wirklich verstehen, die Unterschiede und, wie ich bin nur Tests zu machen, ziehe ich es inline. Irgendwelche Hinweise?

<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 1

Hier ist ein Plunker für die reduzierte Chevron Größe.

Plunker

Dies ist das CSS, das Sie benötigen

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