Font Awesome Background color

Question

When using the brilliant Font Awesome, how can I make the icons not transparent - for instance if I want to use http://fortawesome.github.io/Font-Awesome/icon/chevron-circle

Answer 1

White background scales from a font size 1px to 150px for fa-plus-circle.

// Note: Change background color to match your criteria

// SCSS
.fa-bg-white {
  position: relative;

  &:before {
    position: relative;
    z-index: 1;
  }

  &:after {
    position: absolute;
    content: '';
    background: #FFF;
    border-radius: 50%;
    z-index: 0;
    top: 10%;
    left: 10%;
    width: 75%;
    height: 75%;
  }
}


// HTML