Support for CSS icons over image icons is available as of version 1.8.22, the default library is Font Awesome but you can easily change the settings to use a different library.

To properly set up CSS icons follow the next steps:

1. Go to the plugin settings Home » Board Settings » OUGC Custom Reputation.
   
2. Enable the Use Font Awesome Icons setting by checking Yes.
   
3. In the Font Awesome ACP Code insert the library <link /> of the library to use. By default Font Awesome 4.7 from bootstrapcdn.com is used.
   This only affect the ACP.
   If you want to use a different library change this setting.
   To use Semantic UI library you could paste the following code in this setting.
   

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css" integrity="sha256-KyXPF3/VOPPst/NQOzCWr97QMfSfzJLyFT0o5lYJXiQ=" crossorigin="anonymous" />

   
   * Please note that in most cases this setting value should match the ougccustomrep_headerinclude_fa template value.
   
4. Now update each custom reputation you have and use the Image field as a CSS field. Example: fa fa-heart.
   
   
   

   

By doing this all your custom reputations should use CSS icons instead of images. The first image in this post was taken using the Font Awesome default support, whereas below (last) image is using Semantic UI library.