Adapting pen of animated social media icons into prod - html

Question

I’m trying to implement some animated social media icons on my site with pure CSS and no JS. The pen I found that am trying to adapt is called "Yet Another Set of Animated Social Icons".
The problem is, rectangle glyphs are showing instead of the correct social media icons in my web browser locally and remotely. The icons appear properly in the original codepen. But somewhere along the way in my implementation on my web server or in my web browser, I am importing the web fonts incorrectly.
Here is what it looks like locally in my web browser.
So you can see it yourselves, here it is on my web-server: https://angeles4four.info/
The author of the original codepen uses external style sheets and preprocessors. I’ve done my best to include these imported in my HTML and CSS. See below.
In my head tags in my index.html is this:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
In my css file is this:
#charset "UTF-8";
#font-face {
font-family: 'icomoon';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?3qkin2");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?#iefix3qkin2") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.woff?3qkin2") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.ttf?3qkin2") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.svg?3qkin2#icomoon") format("svg");
font-weight: normal;
font-style: normal;
Is this set up correctly? What am I missing? I'm trying to get my social media icons to render properly (as they appear in the original pen) instead of empty rectangle glyphs.

Answer 1

you forgot add
https:
try this
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">

Answer 2

To recap how I got this working, I made two changes:
Courtesy of Hossam Elmasrey, I added https: to one of the link elements in index.html.
Turns out I was missing local system fonts. So with Manjaro being my local O/S, I invoked: sudo pacman -Ss ttf-liberation. I’m not sure when, how, or why these fonts were missing, but Liberation fonts are installed now.
Then I restarted my browser. When accessing my remote website through Firefox and Chrome, all the icons load properly. Hooray! But loading index.html from Chrome and Firefox directly from my local file tree doesn’t work - - which Connum explained is because web browsers disable some content from loading externally for security reasons. Going forward I will use a local testing server.
Thank you both for your help.