CODEWITHSUNDEEP
htmlcss
rcarcia02
rcarcia02

Reputation: 967

HTML - Icons in buttons trouble

The icons inside my buttons are half outside of them for some reason even though there's definitely enough room inside for them. Why is this and how can I fix it? Also, with my css I have the buttons set to be blue but whenever they're disabled, the buttons are white. How can I have them not change their color when they're disabled? Thanks!

tfoot,
thead {
  background-color: blue;
  color: white;
}

i {
  color: white;
  vertical-align: middle;
}

button {
  background-color: blue;
}

.footertext {
  float: right;
  padding-left: 10px;
  padding-right: 10px;
}
<td colspan="6">
  Requests:
  <button [disabled]="!isNextValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button>
  <label style="float: right;">{{selectedEmployee+1}} of {{empInfo.length}}</label>
  <button [disabled]="!isPreviousValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="previousEmployee()"><i class="fa fa-caret-left fa-2x" aria-hidden="true"></i></button>
</td>

Upvotes: 0

Views: 545

Answers (1)

Korgrue
Korgrue

Reputation: 3478

It is because you are using a fixed width on your button element. Instead of a fixed with, adjust the size using padding. This will allow your button to scale properly for its content. This will also keep the label and icon centered properly in the button.

Something like this:

<button [disabled]="!isNextValid()" class="form-control" style="padding: 15px 30px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button>

Upvotes: 1

Related Questions