awesome fontの使い方を教えてください。

awesome font を使って、html/scssのコードを書きましたが、awesome fontの✙icon【 <i class="fa fa-plus-circle" aria-hidden="true"></i>】のfont size、余白等の調整が全くできません。教えてください。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
7  <link href="style.css" rel="stylesheet">
8  <title>Document</title>
9</head>
10<body>
11
12  <div class="add-item">
13    <i class="fa fa-plus-circle" aria-hidden="true"></i>
14    <input type=text id="input" placeholder="Add a to-do">
15  </div>
16  
17</body>
18</html>
19

SCSS
1/* ------------ add item ------------ */
2.add-item{
3  display: flex;
4  width: 440px;
5  height:40px;
6  background-color: rgb(132, 113, 241);
7  padding: 10px;
8  border-top: 1px solid rgba(0,0,0,0.1);
9
10  .fa fa-plus-circle{
11    font-size: 40px;
12    line-height: 40px;
13    vertical-align: middle;
14    color: #41f64a;
15  }
16
17  #input{
18    left: 50px;
19    width: 420px;
20    background-color: rgb(241, 241, 175);
21    border: none;
22    font-size: 20px;
23    padding-left:10px;
24  }
25}