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.
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?
1 Like
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).
1 Like
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>
Does adding this to the button’s css help ?
.label i {
font-family: 'Font Awesome 5 Brands';
}
1 Like
You don’t need both brands.css and brands.min.css, only one is needed (whichever).
1 Like
yes! Adding that little bit of code fixed it.
Is it possible for a future update down the road to just implement this naturally like the other font-awesome icons?
Thanks Jean!
While it could be possible (although not straightforward because the brand font family is distinct from the regular icon set), I’m not convinced of this change’s usefulness so probably not.
1 Like