If you check the element, you will notice that you can use the awsome font as follows:
.my-icon:before {
content: "\f02d";
}
.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 resultTo 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";
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