Font awesome icon doesn't showing in ojs

I think you should be able to if you add this line in manuscriptJats.inc.php

$this->addScript(‘fontawesome’, ‘js/fontawesome-all.min.js’);

and add fontawesome-all.min.js file inside following folder
plugins/themes/manuscript-Jats/js

I tried adding it somewhere in manuscriptJats.inc.php, but my web gets blank

Did you add it within public function ()

 public function init()
     {
        

     somewhere here

     }

Sorry, my mistake. I did it and the web does not get blank. I add the codes below in footer html page
image
After saving, it just displayed black dot (list icon)
image

I hope you have placed the file fontawesome-all.min.js in plugins/themes/manuscript-Jats/js folder

Yup, I did
image

Does this link add any info that makes it work? (Posted above by Vitaliy)

I tried also codes in link

<svg>......

</svg

Nothing changes

That is not question of code. I think that it is question that your hosting company does not allow connections with external link which affects on webfonts. I have had similar probelm and I solved it after successful communication with hosting company or someone who configured apache in your server.

As font-awesome is already uploaded to the server, the problem should be in somewhere in the previous steps. I suggest checking PHP error log (if the problem is on a PHP or template level) and browser console log.

It is in my browser console

image

I think it relates to @vvucic problem. I have contacted my server provider. No response yet for it

I added the codes in .htaccess file in my journal folder. Is it right place .htaccess? I found another .htaccess file in public html

Yes, if you look carefully your console you will see that Cross-Origin-Request is Blocked. Since webfonts are based on other pace your hosting company does not allow those connections to be established.
Thus, it is thebest to describe the issue and ask themn precisely that they should enable Cross-Origin-Request in order to those fonts be displayed.
I have had that issue on a couple of installations and after modifications done by hosting company or their advices what to put in .htaccess file as I mentioned in previous posts the fonts appeared :slight_smile:
So, be patient and as much as possible precise in your requests to the hosting company and it will be solved.
Feel free to ask for help if they ask for some clarifications you are not familiar with.

To @vvucic,
@kawahyu has downloaded font-awesome on his server. He doesn’t ask about Microsoft fonts that are the subject for CORS block (from his screenshot).

To @kawahyu
You need to inspect all the steps you have done previously. Use browser’s developer tools: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Firstly, I recommend checking whether fontawesome-all.min.js is actually downloaded into the page. You can find all downloaded scripts on the bottom of the page. It should look like this:
http://ojsdemo.e-medjournal.com/plugins/themes/oldGregg/js/fontawesome-all.min.js

Let me know the results.

@kawahyu
Also, check the second part of a browser’s console, which wasn’t caught by screenshot. It’s quite possible, if the path to font awesome is wrong, we will see a corresponding error there.

It is similar to yours
http://jurnalbeta.ac.id/plugins/themes/manuscript-jats/js/fontawesome-all.min.js

I got this after trying font awesome again

OK. It means that font-awesome is successfully loaded.
Now check its usage inside the template and with browser’s developer tools.
Inside template you should use something like:
<i class="fas fa-chart-bar fa-lg"></i>

but on actual page it should transform into:

<svg class="svg-inline--fa fa-chart-bar fa-w-16 fa-lg">
  <path></path>
</svg>
<!-- <i class="fas fa-chart-bar fa-lg"></i> -->

Please post screenshot from admin part of your OJS installation to check whether OJS webfonts are loaded or not.

Thanks

It works in template.
image. I added it in the header.tpl in theme.

When I added in the html page (footer), the svg codes just disappeared and turn to <p></p>. No font awesome displayed.

@vvucic Do you mean the dashboard?

My server provider asked me to add this code to .htaccess
IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "
"
*/IfModule>

After adding it, no internal server error. However, font awesome could not be displayed.

The codes just disappeared after saving it in html page