I added the call to CSS:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
and in custom.css I tried with
[data-icon="pray"] {
content: "\f683" !important;
}
I also added the variables with :after, :before: content, but it did not.
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid"><span>Detais</span></a></li>
<li><a href="#" data-icon="pray"><span>Pray</span></a></li>
</ul>
</div>