B4J Question [ABMaterial] Fontawesome code in CSS problem

[springer kow]

I use Fontawsome code '\f005' or '\f006' in CSS but the font does not display at all, if I change the code to something like '★', '★' will display on the page, Could anyone help me to solve the problem?

'Class module:ComStarRatingEx
Sub Class_Globals
   Public ABMComp As ABMCustomComponent
   Dim myInternalName As String
End Sub

Public Sub Initialize(InternalPage As ABMPage, ID As String, radioName As String)
    myInternalName = radioName
 
    Dim CSS As String = $"
    .stars-container {
    font-family: FontAwesome;
    position: relative;
    display: inline-block;
    color: transparent;
    font-size: 60px;
    }
    .stars-container:before{
    position: absolute;
    top: 0;
    left: 0;
    content: '\f006';
    color:green;
    }
    .stars-container:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '\f005';
 
    color: red;
    overflow: hidden;
 
    }
    .stars-0:after { width: 0%; }
    .stars-10:after { width: 10%; }
    .stars-20:after { width: 20%; }
    .stars-30:after { width: 30%; }
    .stars-40:after { width: 40%; }
    .stars-50:after { width: 50%; }
    .stars-60:after { width: 60%; }
    .stars-70:after { width: 70%; }
    .stars-80:after { width: 80%; }
    .stars-90:after { width: 90%; }
    .stars-100:after { width: 100%;}
    "$
 
   ABMComp.Initialize("ABMComp", Me, InternalPage, ID, CSS)

End Sub

Sub ABMComp_Build(InternalPage As ABMPage, internalID As String) As String
    Return $"<span class='stars-container stars-60'>\f005</span>"$
End Sub

public Sub ConnectPage()
    Dim ss As CompStarRatingEx
    ss.Initialize(page,"ss","ssss")
    page.Cell(4,1).AddComponent(ss.ABMComp)
End Sub
[\code]

 

[Erel]

Please use [code]code here...[/code] tags when posting code.

 

[alwaysbusy]

You will need to double the '\' because in java it has a special meaning: So change:

content: '\f006';

to:

content: '\\f006';

 

[springer kow]

Thank #alwaysbusy, l changed to \\, It works now.

 

[springer kow]

Hi,
from the code above, how can I update width from 60% to 90%, once the page is loaded?
or update <span class='stars-container stars-60'>\\f005</span>
to <span class='stars-container stars-90'>\\f005</span> when I press a button?
It's possible to make something like this?

 

[springer kow]

Ha, Ha, I found the magic wand!

Sub btn1_Clicked(Target As String)
     ss.ABMComp.ABMComp.HTMLReplaceClass("stars-container stars-60","stars-container stars-90")
     ss.ABMComp.Refresh
End Sub