FontAwesome Icons "Brands" not working

I’m trying to get a windows icon for my strip title to work. So I used “Windows^windows” so the fontawesome icon would appear but instead I’m getting a blank box.

image

I downloaded the updated fontawesome .css files which includes the brands and more etc. I added them to the assets>fonts folder. I then accessed both index.html files in the app>client & app>launcher folders and added the additional line to point to the *.css files. For example I added

<link rel="stylesheet" type="text/css" href="../assets/fonts/brands.css"/>

Is there anything more I need to do? I can’t get it to work as I believe I did everything correctly to direct the new fontawesome css files. Unless there is another index or html directory I’m missing.

Thoughts?

You also need to add the corresponding font file (something like fa-brands.woff) and check that brands.css correctly points to it (as fa-solid.css points to fa-solid-900.woff).

Thanks Jean!

I must be missing something critical as well as I’m still getting a blank icon.

I added the *.woff files to the director and inside the “brands.css & brands.min.css” I directed them to the *.woff files. usiung "./fa-brands-400.woff"

I also directed both index.html files to the new *.woff files. I’ve attached my index files and the Brands css incase I missed soemthing. Any thoughts?

Brands.css

/*!
 * Font Awesome Free 5.10.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("./fa-brands-400.eot");
  src: url("./fa-brands-400.eot?#iefix") format("embedded-opentype"), url("./fa-brands-400.woff2") format("woff2"), url("./fa-brands-400.woff") format("woff"), url("./fa-brands-400.ttf") format("truetype"), url("./fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }

Brands.min.css

/*!
 * Font Awesome Free 5.10.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(./fa-brands-400.eot);src:url(./fa-brands-400.eot?#iefix) format("embedded-opentype"),url(./fa-brands-400.woff2) format("woff2"),url(./fa-brands-400.woff) format("woff"),url(./fa-brands-400.ttf) format("truetype"),url(./fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}

Client Index Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon" href="../assets/logo.png" />
    <link rel="preload" href="../assets/fonts/fa-solid-900.woff" as="font"/>
	<link rel="preload" href="../assets/fonts/fa-brands-400.woff" as="font"/>
    <link rel="preload" href="../assets/fonts/roboto-medium.woff" as="font"/>
    <link rel="stylesheet" type="text/css" href="../assets/open-stage-control.css" hot-reload/>
    <link rel="stylesheet" type="text/css" href="../assets/theme.css" hot-reload/>
    <link rel="stylesheet" type="text/css" href="../assets/fonts/fontawesome.min.css"/>
	<link rel="stylesheet" type="text/css" href="../assets/fonts/fontawesome.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/fonts/fa-solid.css"/>
	<link rel="stylesheet" type="text/css" href="../assets/fonts/brands.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/fonts/roboto-medium.css"/>
    <link rel="shortcut icon" href="../assets/favicon.png"/>
    <script src="../client/open-stage-control-client.js"></script>
</head>

<body>
    <div id="container"></div>
    <div id="sidepanel" class="hide">
        <div id="sidepanel-wrapper"></div>
        <div id="sidepanel-handle"></div>
    </div>
    <div id="notifications"></div>
</body>

</html>

Launcher Index Html

<!DOCTYPE html>
<html id="launcher">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
    <link rel="preload" href="../assets/fonts/roboto-medium.woff" as="font"/>
    <link rel="preload" href="../assets/fonts/fa-solid-900.woff" as="font"/>
	<link rel="preload" href="../assets/fonts/fa-brands-400.woff" as="font"/>
    <link rel="stylesheet" type="text/css" href="../assets/open-stage-control.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/fonts/fontawesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/fonts/fa-solid.css"/>
	<link rel="stylesheet" type="text/css" href="../assets/fonts/brands.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/fonts/roboto-medium.css"/>
    <script src="open-stage-control-launcher.js"></script>
</head>

<body>
    <div id="loading"><div class="spinner"></div></div>
</body>

</html>