Adding font awsome icons to css

Question

i have this table style in my CSS folder and I tried a lot of things but I can't manage to put font awsome icons inside of it with different colors. instead of just colored dots

.services-table { width: 100%; margin: -9px 0 10px; border-collapse: collapse; }
  .services-table th { color:#fff; background: #A5A5A5; padding: 10px; }
  .services-table td { padding: 8px 10px; }
  .services-table tr.odd { background: #F3F3F3; }
  .services-table tr.even { background: #E6E6E6; }
  .services-table th.col-service, td.col-service { width: 30%; } 
  .services-table th.col-info, td.col-info { width: 50%; }  
  .services-table th.col-status, td.col-status { width: 20%; }  

  span.status { display:inline-block; width: 15px; height:15px; border-radius:10px; }
  span.status.green { background: #008000; }
  span.status:after { margin-left: 20px; }
  span.status.green:after { content: 'Good' }
  span.status.amber { background: #ffcf00; color: #ffcf00; }
  span.status.amber:after { content: 'Amber' }
  span.status.red { background: #ff0000; color: #ff0000; font-weight:bold; }
  span.status.red:after { content: 'Red' }

The table works with salesforce fine and it displays different colors based on the service status, But Instead of colors I want icons.

Answer 1

you add on your file css

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0awesome.min.css');

then you can use the font awesome like this

/* exp: icon bell is : "\f0f3"
icon info: "\f05a" */

.statuts{
 text-align:center;
 background-color:#fff;
 font:normal normal normal 14px/1 FontAwesome;
 font-size:inherit;
 text-rendering:auto;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale
 }

 .statuts.red{ color:#f00;}
 .statuts.blue{ color:#00f;}
 .statuts.red.danger:before{content:"\f0f3";font-size:30px;}
 .statuts.blue.info:before{content:"\f05a";font-size:30px;}    

demo: "http://jsfiddle.net/bfahmi/dcp3wvjt"