Can I Override An Existing Font Awesome CSS Icon?

Question

I'm trying to change an exsiting Font Awesome Icon that is created in an app's CSS. I can't change the app or the CSS that it has already in place, but I can add another CSS file. I'm hoping in that file that I can edit I'm able to change one of the icon's that are already there.

I'm trying to change the Icons here:

http://test.archivesspace.org/repositories/14

I'd like to change the fa-file-image-o and fa-files-o to any other Font Awesome Icon in a different CSS file that I can add to this application I'm running on another site. Is it possible to change an icon like that by adding it in a separate CSS file?

Answer 1

Simply change the code of the icon with the new one using content of pseudo element.

Here is an example where I used this icon https://fontawesome.com/v4.7.0/icon/ban to replace the old one:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<style>
.fa-file-image-o:before {
  content:"\f05e";
}
</style>

<i class="fa fa-file-image-o fa-4x"></i>

Same logic with Font Awesome 5

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
<style>
.fa-user:before {
  content:"\f05e";
}
</style>

<i class="fas fa-user fa-4x"></i>