Font Awesome CSS Circle Background

style.css

/*
  As you know there is 2 ways to do this. One is stacked icons as described here: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
  However this is a much simpler approach
  Adjust the width, height, line-height, and padding to suite your needs
  I used the i selector for general purposes but you can change it as well
*/
i {
    background: #ffc0c0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    padding: 30px;
}