2

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?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Blake
  • 131
  • 3
  • 10

1 Answers1

2

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>

enter image description here

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks! That works. Is it possible to do the same thing with a real image? Like a gif or a png file? – Blake Jan 23 '19 at 14:42
  • 1
    @Blake yes, in this case don't change the content .. add `opacity:0` to hide it and then add `background-image:url()` and set the url of your image – Temani Afif Jan 23 '19 at 14:47