Question

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

.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，它根据服务状态显示不同的颜色，但不是颜色，而是我想要的图标。

Answer 1

您在文件中添加了CSS

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

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

/ * EXP：图标铃是：“\ 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”

将字体awsome图标添加到css

1 个答案: