How can I use Font Awesome icons in a UTF-16 encoded html page?

Question

I'm trying to use Font Awesome icons in my UTF-16 html pages but the icons don't show up normally, because of the encoding. Walking step by step, this works fine:

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <style>
    .ololo::after {
    content: "\f007";
    font-family: 'Font Awesome\ 5 Free';
    }
  </style>

</head>
<body>

  <h1><i class="fas fa-american-sign-language-interpreting"></i></h1>
  <h1 class="ololo"></h1>

</body>
</html>

Both icons show up nice when <meta charset="UTF-8">. But when I switch the page to <meta charset="UTF-16">, the Font Awesome icons simply vanish leaving no trace of them on the screen. So the question is: how can I make Font Awesome icons show up correctly in a UTF-16 encoded html page?

@Ry- my Freemarker templates are being compiled as UTF-16 files, as well as the rest of my Java project, which is the reason why I can't simply switch to UTF-8 — Václav, May 05 '19 at 13:51
What can you tell us about the `Content-Type` HTTP headers? Do they declare an encoding? If so, it is the correct one or a different one? — Álvaro González, May 05 '19 at 13:53
@ÁlvaroGonzález yes, one may set `Content-Type: text/css; charset=utf-8`, but I can't see how does it relate to the question. Can you clarify me how it does, please? — Václav, May 05 '19 at 13:57
Come on, guys, what was the reason for downgrading my question? — Václav, May 05 '19 at 14:05
I didn't downvote, but one reason I can imagine for downvoting is that I took your source, saved it as UTF-16 and it worked fine. — Mr Lister, May 06 '19 at 06:38
@MrLister I can't believe I didn't realize that I could simply use my **xed** or any other notepad-like tool to do it... Thank you! — Václav, May 06 '19 at 12:59

score 0 · Answer 1 · answered May 05 '19 at 13:48

The only way to make Font Awesome work on a UTF-16 page is to convert the referred Font Awesome CSS file from UTF-8 to UTF-16. To do it, firstly you download Font Awesome package to your machine, then you take the css/all.min.css file and convert it into UTF-16. This piece of Java code does the job well:

import java.nio.file.*;
import java.io.*;

public class Convrtr {

    public static void main(String[] args) {

    Path source = FileSystems.getDefault().getPath("/home/absolute/path/to/fontawesome/css","all.min.css");
    Path result = FileSystems.getDefault().getPath("/home/absolute/path/to/fontawesome/css","awesome.min.css");

    try(Reader r = new InputStreamReader(new FileInputStream(source.toFile()), "UTF-8");
        Writer w = new OutputStreamWriter(new FileOutputStream(result.toFile()), "UTF-16")) {

    char buffer[] = new char[2048];
    int length;
    while ((length = r.read(buffer, 0, buffer.length)) != -1) {
        w.write(buffer, 0, length);
    }
    } catch (IOException e) {
        System.err.print("IO Error");
    }

    }

}

After you run this code, you get your brand new awesome.min.css file which is the same old all.min.css encoded in UTF-16. And you don't actually need to change its name (I did it just because of working in the same folder). Since this moment, this page will be properly showing the Font Awesome Icons:

<!DOCTYPE html>
<head>
  <meta charset="UTF-16">
  <link rel="stylesheet" href="fontawesome/css/awesome.min.css"/>

  <style>
    .ololo::after {
    content: "\f007";
    font-family: 'Font Awesome\ 5 Free';
    }
  </style>

</head>
<body>

  <h1><i class="fas fa-american-sign-language-interpreting"></i></h1>
  <h1 class="ololo"></h1>

</body>
</html>

How can I use Font Awesome icons in a UTF-16 encoded html page?

1 Answers1