<link rel="stylesheet" href="../assets/vendor/themify-icons/themify-icons.css">
<link rel="stylesheet" href="../assets/vendor/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/vendor/charts-c3/plugin.css"/>
<link rel="stylesheet" href="../assets/vendor/jvectormap/jquery-jvectormap-2.0.3.css"/>
<link rel="stylesheet" href="../assets/css/main.css" type="text/css">
Font awesome has a guide on how to use them locally so I would refer to the documentation.
Font awesome icons are fonts so you need to have the resources loaded locally just as you would with a normal custom font.
Regarding the other files you listed then only you can answer that question? Why did you add them?
Or did you just copy something you saw?
Whether you need them or not depends on whether you are using something that relies on them. For example one css file refers to charts so I assume you have loaded some chart plugin that needs them? If not why is the css file there? If it came bundled with a plug-in then you probably need them.
Font awesome icons are fonts so you need to have the resources loaded locally just as you would with a normal custom font
I didn’t understand??Can you show an example
Follow the font awesome tutorial step by step. It’s explained much better than I can. 
Just create a new blank page for testing so that you aren’t hindered by anything else going on.
If you still have problems then post back here with what you have tried.
I downloaded the font-awesome package.
I created a test html page.in that package.
I linked to the css.
<link rel="stylesheet" href="css/all.css">
I added the icon to he html:
<i class="fa fa-solid fa-smog"></i>
I got this:
