fontawesome transforms

fontawesome transforms

by gmdavis62

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<div class="container">
  <div class="row">

    <div class="col-xs-6">

        <span class="fa-stack bclass text-danger">
          <i class="fas fa-circle fa-stack-2x"></i> 
          <i class="fas fa-stack-1x fa-thumbs-down fa-inverse"></i>
        </span>
        <span class="fa-stack bclass text-warning">
          <i class="fas fa-circle fa-stack-2x"></i> 
          <i class="fas fa-stack-1x fa-bold fa-inverse"></i>
        </span>
        <span class="fa-stack bclass text-primary">
          <i class="fas fa-circle fa-stack-2x"></i> 
          <i class="fas fa-stack-1x fa-folder-open fa-inverse"></i>
        </span> selected
        <br><br>
        <span class="fa-stack bclass text-gray-500">
          <i class="fas fa-circle fa-stack-2x"></i> 
          <i class="fas fa-stack-1x fa-thumbs-down fa-inverse"></i>
        </span>
        <span class="fa-stack bclass text-gray-500">
          <i class="fas fa-circle fa-stack-2x"></i> 
          <i class="fas fa-stack-1x fa-bold fa-inverse"></i>
        </span>
        <span class="fa-stack bclass text-gray-500">
          <i class="fas fa-circle fa-stack-2x"></i> 
          <i class="fas fa-stack-1x fa-folder-open fa-inverse"></i>
        </span> not-selected
        <br><br>
        <span class="fa-stack bclass text-danger">
          <i class="far fa-circle fa-stack-2x text-gray-500"></i> 
          <i class="fas fa-stack-1x fa-thumbs-down"></i>
        </span>
        <span class="fa-stack bclass text-warning">
          <i class="far fa-circle fa-stack-2x text-gray-500"></i> 
          <i class="fas fa-stack-1x fa-bold"></i>
        </span>
        <span class="fa-stack bclass text-primary">
          <i class="far fa-circle fa-stack-2x text-gray-500"></i> 
          <i class="fas fa-stack-1x...

CSS

body{font-family:sans-serif}
.text-info {color:#0098C5;}
.text-secondary {color:#535353;}
.text-primary {color:#2f538c;}
.text-danger {color:#c00959;}
.text-warning {color:#f5a709;}
.text-gray-500 {color:#adb5bd;}