how to use fontAwesome icon from CSS

Question

Is it possible to use a font-awesome icon using css? Now I tried with html, but on the button I need to use it as a pseudo-class like :after :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>

Run codeHide result

Answer 1

You can use this. I updated your code.

ul li {
  display: inline-block;
}

.right {
  float: right;
}

button:after {
  content: "\f067";
  font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

<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</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>

Run codeHide result

Answer 2

If you check the element, you will notice that you can use the awsome font as follows:

.my-icon:before {
    content: "\f02d"; /* The content of book icon*/
}
.my-icon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

<ul>
  <li><a href="#"><i class="my-icon"></i></a></li>
</ul>

Run codeHide result

To use them, you need to find the code for each icon. You can simply do this by checking the element with this icon (for example, on the awsome font website).

, . :

.my-icon:before {
    content: "\f02d"; /* The content of book icon*/
    font-size: 32px;
    color:red;
}
.my-icon {
    display: inline-block;
    font: normal normal normal 24px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

<ul>
  <li><a href="#"><i class="my-icon"></i></a></li>
</ul>

Hide result

Answer 3

You just need to set the FontAwesome font for the element and add a pseudo element with Unicode .

ul li {
   display: inline-block;
}

.right {
   float: right;
}

button {
    font: normal normal normal 14px/1 FontAwesome;
}
button:after {
    content: "\f217";
}

<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></button></li>
</ul>

Run codeHide result

Answer 4

span:before{
  content: "\f0c9";
  font-family: 'FontAwesome';
}

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

Run codeHide result