My goal is to incorporate animated social media icons on my website using only CSS without any JavaScript. I came across a pen called "Yet Another Set of Animated Social Icons" that I'm attempting to modify.
The issue at hand is that instead of the correct social media icons, my web browser displays rectangle glyphs both locally and remotely. The icons appear correctly in the original codepen, but somewhere during the implementation on my web server or browser, there seems to be an error with importing the web fonts.
You can see how it looks locally in my browser.
If you'd like to take a look yourself, here is the link to my website:
The creator of the original codepen used external stylesheets and preprocessors. I've made sure to include these imports in my HTML and CSS. See below for the details.
In the head tags of my index.html, I have included the following:
<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, I have added the following:
@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;
Can anyone confirm if this setup is correct? What could be missing that's causing my social media icons to display as empty rectangles instead of rendering properly (like in the original pen)?