我正在使用salesforce并使用状态服务我可以显示我的表格中会显示哪种颜色,但问题是,它只显示纯色,我无法在其上放置任何文字。所以我在css中使用了'after'函数,这样我就可以显示文本和字体真棒图标了。
现在我已经知道我在旁边显示一个图标和一个Arial字体文本时遇到了一些问题。以下是我所做的所有事情。谁知道如何让它工作?
.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:after { }
span.status.green { color: #008000; }
span.status.green:after { font-weight: bold; color #008000; content: '\f118 Good'}
span.status.amber { color: #ffcf00; }
span.status.amber:after { font-family: FontAwesome; font-weight: bold; color: #ffcf00; content: '\f11a' }
span.status.amber:after { font-family: Arial,sans-serif; color: #ffcf00; content: ' Fixing' }
span.status.red { color: #ff0000; }
span.status.red:after { font-family: FontAwesome; font-weight: bold; color: #ff0000; content: '\f119 Issues' }
Here is what the table looks like with the inspector
<apex:outputPanel id="logged" layout="block" rendered="{!NOT(ISPICKVAL($User.UserType,'Guest'))}" >
<div class="row">
<!-- main pane -->
<div class="col-md-12 col-xs-12 ">
<h1 class="smalltitle">
<span>Service status</span>
</h1>
<div class="well well-large well-transparent clearfix">
<center>
<!-- SERVICE STATUS SECTION -->
<!--h3><i class="fa fa-tachometer"></i> Service status</h3>-->
<!-- <mark>service status table goes here</mark> -->
<apex:dataTable value="{!serviceitems}" var="item" id="tblServices"
styleClass="table table-condensed services-table table-striped" rowClasses="odd,even" columnClasses="col-service, col-info, col-status">
<apex:column >
<apex:facet name="header">Service</apex:facet>
<apex:outputText value="{!item.name}"/>
</apex:column>
<apex:column >
<apex:facet name="header">Information</apex:facet>
<apex:outputText value="{!item.Information__c}"/>
{! IF(item.information__c='','No reported issues','')}
</apex:column>
<apex:column >
<apex:facet name="header">Status</apex:facet>
<span class="status {!item.Status_Colour__c}"> </span>
</apex:column>
</apex:dataTable>
</center>
</div>
</div>
</div>
答案 0 :(得分:0)
<span style="font-family:arial">This is in Arial font.</span> <span style="font-family:Georgia">And this is in San Serif, Cool?</span>
&#13;