html - 将动画社交媒体图标的笔改编成产品

Question

我正在尝试使用纯 CSS 而非 JS 在我的网站上实现一些动画社交媒体图标。我发现正在尝试修改的笔名为“Yet Another Set of Animated Social Icons”。

问题是，在我的网络浏览器中本地和远程显示的是矩形字形，而不是正确的社交媒体图标。图标在原始代码笔中正确显示。但是在我的 Web 服务器或 Web 浏览器上实现的过程中，我错误地导入了 Web 字体。

这是它的样子locally in my web browser .

所以你可以自己看到它，它在我的网络服务器上:https://angeles4four.info/

原始代码笔的作者使用外部样式表和预处理器。我已尽力将这些导入到我的 HTML 和 CSS 中。见下文。

在我的 index.html 中的 head 标签是这样的:

<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">

在我的 CSS 文件中是这样的:

@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;

设置是否正确？我错过了什么？我正在尝试让我的社交媒体图标正确呈现(因为它们出现在原始笔中)而不是空的矩形字形。

Answer 1

你忘了添加

https:

试试这个

 <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">