How to change the size of an icon in an ion-header-bar?

ionic-framework ionicons
Edward Maxedon picture Edward Maxedon · Jul 14, 2016 · Viewed 10.6k times · Source

I'm using ionic version 1.2.4.

I'm essentially trying to reduce the size of the icon by changing it's font size. What would be the appropriate CSS selector to change the font-size of the icon in the code below? Nothing I try seems to be working.

  <ion-nav-bar>
    <ion-nav-buttons side="right">
        <button class="button button-clear">
            <i class="icon ion-edit"></i>
        </button>
    </ion-nav-buttons>
  </ion-nav-bar>

Answer

Ritesh Jagga picture Ritesh Jagga · Jul 14, 2016

Declare your button like this

<button class="button button-icon icon ion-android-notifications"></button>

Add this class to your project css file.

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

Related questions

Rotate an ionicon on the page

I want to display directions with an arrow and was thinking to use the standard ionic arrow for the direction. Can I rotate the up arrow into any direction somehow? ion-arrow-up-a Here is an attempt from the comments below <…

Read More
Use custom icons with tabs in ionic2

I need to use customs icons with tabs in ionic 2. Moreover I need to change the title color and icon, if the tab is selected. Example: ionic Tabs

Read More
Ionicons: How to add custom icons?

How can i add custom icons to ionicons? I could not yet find a step by step instruction what to do. There are many really basic icons (like the paragraph icon for example) which are not provided by ionicons, so …

Read More