CODEWITHSUNDEEP
cssangularfont-awesome
Sator
Sator

Reputation: 776

background color of angular-fontawesome icons not scalling

Im using angular-fontawesome and want to change the background color of an font-awesome fa-icon

 <fa-icon 
    class="vue-icon"
    [icon]="faVue"
    ></fa-icon>

I changed the color using the class attribute

.vue-icon {
    padding: 10px;
    background: #62dda4;
}

If I use the size attribute to make the icon bigger the bg is only half filled

 <fa-icon 
    class="vue-icon"
    [icon]="faVue" 
    size="6x"
    ></fa-icon>

change background color

what causes this behavior ?
so far I could not found a background property from the library

Upvotes: 0

Views: 345

Answers (1)

Gurkan Yesilyurt
Gurkan Yesilyurt

Reputation: 2675

Try giving it a block property to contain it.

.vue-icon {
  display: inline-block; /* add this line*/
  padding: 10px;
  background: #62dda4;
}

Upvotes: 2

Related Questions