Change color of icon

Asked

Viewed 1,469 times

0

How do I change the color of an icon when clicked? I have created custom icons and are working perfectly, but I would like that selected, change your color. I’ve tried everything but I haven’t got anything yet. If anyone can help me.. Please. My icons look like this: HTML

<div no-padding>
<ion-segment [(ngModel)]="Menu" class="SwipedTabs-tabs">

  <ion-segment-button (click)="selectTab(0)">
    <ion-icon name="icon-ico_gastronomia_off"></ion-icon>
  </ion-segment-button>

  <div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]=" 
 {'width.%': (100/this.tabs.length)}"></div>
<ion-slides #SwipedTabsSlider (ionSlideDrag)="animateIndicator($event)" 
      (ionSlideWillChange)="updateIndicatorPosition()"
      (ionSlideDidChange)="updateIndicatorPosition()" 
      (pan)="updateIndicatorPosition()" [pager]="false">
      <ion-slide>

      <ion-segment mode="md" [(ngModel)]="Menu">
      <ion-segment-button value="Todosgastronomia" class="round-button" 
      (click)="selecionaprodutoscategoria(1)">
        Todos
      </ion-segment-button>

      <ion-segment-button value="Bareserestaurantes" class="round-button" 
      (click)="selecionaprodutoscategoria(2)">
        Bares & Restaurantes
      </ion-segment-button>

scss

 .SwipedTabs-indicatorSegment{
    -webkit-transition: 0.3s all;
    -moz-transition:  0.3s all;
    -o-transition:  0.3s all;
    transition:  0.3s all;
    transform-origin: top 0 left 0;
    height: 6px;
    position: relative;
    top: -2px;
    background-color: #179c90 !important;

}

// COR GASTRONOMIA/COMPRAS/PASSEIOS  SEGMENTS //
.SwipedTabs-tabs ion-segment-button{
    border:none !important;
    color: carioca!important;
    background-color:white!important;
    background: transparent !important;

    ion-icon:before {
        font-size: 3.7rem !important;    
        color: #393d37;
     }
}

.SwipedTabs-tabs ion-segment-button.SwipedTabs-activeTab{
    color:#179c90     !important;
    width: fit-content !important;

}



.SwipedTabs-tabs
{
    border-bottom: solid 3px #cccabd  !important;
    border:none;
}

.segment-button {

    border-color: #332d2c !important;
    color: #393d37 !important;
    border-width: none !important;
    flex: auto !important;
    background: transparent;

    &.activated, &.segment-activated {   

    //border-bottom: 2px solid red !important;
                     //Corresponde a cor das subcategorias ativas
    color:#179c90  !important;  

    background-color: rgba(53, 52, 52, 0.089) !important;

                       //Corresponde a cor do ícone ativo
    ion-icon:Before {
    font-size: 4rem ;    
    background: transparent;
    color: #179c90;

    }   

    }
}

    ion-segment-button {
    border-style: none;
    color: #179c90;
    height: 6px;
    font-size: 11px !important;
    text-transform: none !important;  
    max-width: 100% !important;
html ionic apache-cordova ionic3

  • These icons are inside of some other component, for example some button?

  • @Gabrielcarvalho want it when clicked. I have 4 icons in segment Buttons, I want when you click on some, it change from gray to blue for example, just the selected.

  • @Renata <ion-segment-button (click)="selectTab(0)"> <ion-icon name="icon-ico_gastronomia_off"></ion-icon> </ion-segment-button>

  • Something that seems to be missing is to include value = "Todosgastronomia" in the ion-segment-button corresponding of the first block (the one with the icons).

  • @Renata once again, Thank you so much. Saved me again. I’ve been in this problem for so long and it was a simple thing until. : s Thanks! : D

1 answer

0


You can change the color by the file Theme/variables.scss, but only found the solution for IOS. Example by changing the color to red:

$segment-button-ios-text-color: red;

Another option can be changed directly by the page . scss. Example:

.segment .segment-button {
    background-color: white;
    color: red;
    border-color: grey;
}

.segment .segment-button.segment-activated {
    background-color: red;
    color: white;
    border-color: blue;
}

  • Using your answer, you changed only the bottom buttons as in the image. [! [insert image description here][1][1] [1]: https://i.stack.Imgur.com/U4doa.png &#Xa

  • I edited my question, if you can see if there’s anything wrong with the code, although I think so. I’m still learning so I might be doing some things wrong

  • @Felipe XST, you can include your html file code as well?

  • Ready. Not complete, has icons oturos but this is the basis

Browser other questions tagged html ionic apache-cordova ionic3

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