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.
   
   Code:

   <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.