Change color of the Sidemenu icon

Asked

Viewed 952 times

0

Good afternoon, how do I change the color of the sidemenu icon? I looked at the documentation and did some research but found nothing.

img

<ion-header>
<ion-navbar  class="navbar-amcham">
<button ion-button menuToggle>
  <ion-icon name="menu"></ion-icon>
</button>
<ion-title>AMCHAM RIO</ion-title>
</ion-navbar>
</ion-header>
ionic

  • What framework are you using? Where is your CSS, HTML, etc? Just with what you put in the question not to know what you refer to, put by the documentation link.

  • @hugocsl the framework is IONIC. It is not an HTML and CSS problem, the question is about a proper ecosystem.

  • put the classes that are declared in the side menu line please.

  • Just a blank project created as a sidemenu in Ionic. But I don’t know where to find this icon in the project.

  • @Felipexst put the html in the question together so we can take a look

  • @SHRIMP edited the post and added the code

Show 1 more comment

3 answers

1


I believe that in the global SCSS should do something like:

ion-header {
    ion-icon {
         color: #fc0; /*laranja*/
    }
}

In Ionic 1 the file to be edited is the ./scss/ionic.app.scss and in ionic3 is the ./src/app/app.scss

1

In the file variables.scss you set the color:

$colors: (
  primary:    #3e66ab,
  secondary:  #32db64,
  danger:     #dd303e,
  light:      #edeff2,
  dark:       #333333
);

And in the ion-icon tag you assign the color:

<ion-icon name="menu" color="dark"></ion-icon>

1

within the project has the file variables.scss where you will set all the colors of your code.

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  suaCor: #b13371
);

There are already some default, but just add a new as in the example above in suaCor.

After setting the color in the file .sass you will just call it as in the example below

<button ion-button menuToggle color="suaCor">
    <ion-icon name="menu"></ion-icon>
</button>

  • Thank you for answering. Your solution worked too.

  • always try to set colors inside that global file for better optimization after! and I’m glad I helped :D

Browser other questions tagged ionic

You are not signed in. Login or sign up in order to post.