how to use fontAwesome icon from css

Question

Can I use the font-awesome icon with CSS? Now I have tried with HTML but on the button, I need to use pseudo-class like: before so can you help me?

ul li {
  display: inline-block;
}

.right {
  float: right;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note <i class="fa fa-plus"></i></button></li>
</ul>
<ul>
  <li><a href="#"><i class="fa fa-user"></i></a></li>
  <li><a href="#"><i class="fa fa-book"></i></a></li>
  <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
</ul>