将字体真棒图标添加到css [重复]答案

【问题标题】：Adding font awsome icons to css [duplicate]将字体真棒图标添加到css [重复]
【发布时间】：2016-02-29 14:51:30
【问题描述】：

我在我的 CSS 文件夹中有这个表格样式，我尝试了很多东西，但我无法设法在其中放置不同颜色的字体可怕图标。而不仅仅是彩色点

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

该表可以很好地与 salesforce 配合使用，它会根据服务状态显示不同的颜色，但我想要图标而不是颜色。

【问题讨论】：

看看这个问题：stackoverflow.com/questions/14736496/…也许对你有帮助。

标签： html twitter-bootstrap font-awesome

【解决方案1】：

你添加你的文件 css

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

那么你可以像这样使用很棒的字体

/* 经验：图标铃是：“\f0f3”
图标信息：“\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;}

演示：“http://jsfiddle.net/bfahmi/dcp3wvjt”

【讨论】：