CODEWITHSUNDEEP
htmlcssionic-framework
George Edwards
George Edwards

Reputation: 9229

Using Custom Icons for HTML buttons

I am building a mobile app using IONIC 2, and have the following group of buttons. Three of them use the standard Ionicons resources. The third one however, uses a custom image of a key, but as you can see, it isn't scaled appropriately.

Buttons

Here is my code:

scss:

  .buttons .key { 
      background-color: #de574b;       
      transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -o-transform:rotate(45deg); 
  }

  .ion-ios-key::before, .ion-md-key::before {
      max-height: 20px;
      align-content: center;
      vertical-align: center;
      content: url('../../img/Key.png');
    }

html:

 <div class="buttons">
      <button class="bluetooth">
        <ion-icon name="bluetooth"></ion-icon>
      </button>

      <button class="help">
        <ion-icon name="md-help"></ion-icon>
      </button>

      <button class="key">
        <ion-icon name="key"></ion-icon>
      </button>

      <button class="new" (click)="newDevice()">
        <ion-icon name="md-add"></ion-icon>
      </button>
  </div>

My max-height property doesn't do anything, and nor does a height property. How can I style this icon to fit so that is looks like the other icons?

Upvotes: 1

Views: 6169

Answers (1)

zer00ne
zer00ne

Reputation: 43880

align-content only works with display: flex,flex-direction: column, and flex-flow: row wrap (under specific circumstances).

Try:

.ion-ios-key, .ion-md-key {
      line-height: 20px;
      vertical-align: center;
      background: url('../../img/Key.png')no-repeat;
      background-size: contain;
    }

Remove: 

.ion-ios-key::before, .ion-md-key::before {
      max-height: 20px;
      align-content: center;
      vertical-align: center;
      content: url('../../img/Key.png');
    }

background-size: contain; will center the image automatically and expand it enough to maintain it's aspect ratio (ie max width and height without deforming), plus no clipping like what you experience with the original code. If you are not satisfied with it's position, use background-position: center or background-position: 45% 45%*

*45% 45% is just an arbitrary value used as an example.

Upvotes: 1

Related Questions