The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Adapting pen of animated social media icons into prod

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #286843

    I’m trying to implement some animated social media icons on my site with pure CSS and no JS. Here is the test case I found that am trying to adapt for my purposes:

    Here is what it looks like locally in my web browser:

    So you can see it yourselves, here it is on my webserver:

    I figure the problem might be that I am importing the web fonts incorrectly. The author of the original codepen uses external style sheets and such. I’ve done my best to include these imported in my HTML and CSS like so:

    In my head tags in my index.html is this:

    In my css file is this:

    Is this set up correctly? What am I missing?


    I got this working. Here are the two changes I have made:

    (1.) I added https: to one of the link elements in index.html.
    (2.) 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 is because web browsers disable some content from loading externally for security reasons. Going forward I will use a local testing server.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.