【发布时间】：2017-07-20 06:13:23
【问题描述】：
我正在使用 R blogdown 包构建一个静态网站以用作博客，该包充当 Hugo 静态网站生成器的包装器。
我想在标题下方有一行社交媒体图标，我使用FontAwesome 工具包在一定程度上实现了这一点，该工具包已经被我选择的主题使用。
但是，我想包含一些工具包中不存在的图标。我在Academions 项目中找到了一些，还有一个是我在 Inkscape 中制作的单层 SVG。这是 Pocket 的方形图标。
我使用Icomoon 应用程序将它们全部组合成一个自定义字体（称为customfonts），并将字体放在我的Hugo static/fonts 目录中，并将CSS 文件放在我的static/css 目录中。我还修改了 CSS 文件中的文件路径以指向 static/fonts 目录，并添加了类似于 FontAwesome CSS 文件中的样式类。
我在页脚中调用 CSS 文件并尝试插入图标。
当我使用来自 Academicons 字体的图标之一时，如下所示：
<i class="cf cf-GoogleScholar cf-3x"></i>
我得到了图标，但是当我尝试像这样插入我的自定义图标时：
<i class="cf-pocket-square cf-3x"></i>
我没有显示图标。
因此，我制作的 SVG 一定有问题。但是我不知道那是什么或如何解决它。
我已经将自己制作的 SVG、CSS 文件和字体文件放在了this directory。
如何让我的图标显示？
编辑：我在上面链接的目录中添加了一个 MWE。
这里是 HTML：
<html class="wf-opensans-i3-active wf-opensans-i7-active wf-opensans-n3-active wf-opensans-n7-active wf-breeserif-n4-active wf-active" lang="en-us">
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="./customfonts.css">
</head>
<body>
This one works:
<div>
<a href="EXAMPLE" rel="me"><i class="fa fa-twitter-square fa-3x"></i></a>
<a href="EXAMPLE" rel="me"><i class="fa fa-facebook-square fa-3x"></i></a>
<a href="EXAMPLE" rel="me"><i class="cf cf-GoogleScholar cf-3x"></i></a>
</div>
This one with my custom icon does not:
<div>
<a href="EXAMPLE" rel="me"><i class="fa fa-twitter-square fa-3x"></i></a>
<a href="EXAMPLE" rel="me"><i class="fa fa-facebook-square fa-3x"></i></a>
<a href="EXAMPLE" rel="me"><i class="cf cf-pocket-square cf-3x"></i></a>
</div>
</body>
</html>
这是输出的样子：
这是 CSS 文件顶部的样子：
@font-face {
font-family: 'customfonts';
src: url('./customfonts.eot?7cqlun');
src: url('./customfonts.eot?7cqlun#iefix') format('embedded-opentype'),
url('./customfonts.ttf?7cqlun') format('truetype'),
url('./customfonts.woff?7cqlun') format('woff'),
url('./customfonts.svg?7cqlun#customfonts') format('svg');
font-weight: normal;
font-style: normal;
}
.cf {
display:inline-block;
font:normal normal normal 14px/1 customfonts;
font-size:inherit;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.cf-pocket-square .path1:before {
content: "\e900";
color: rgb(0, 0, 0);
}
.cf-pocket-square .path2:before {
content: "\e901";
margin-left: -1em;
color: rgb(0, 0, 0);
}
.cf-pocket-square .path3:before {
content: "\e902";
margin-left: -1em;
color: rgb(255, 255, 255);
}
.cf-GoogleScholar:before {
content: "\e903";
}
+ style classes ...
编辑#2：@grinmax 正确指出 HTML 结构不一致。按照他的建议，结果如下：
- 更改 HTML
- 更改 CSS
在生成图标时，这是不正确的，因为 IcoMoon 似乎已经分离了我用来创建图标的图层。但是，当我查看我用来制作字体的 SVG 时，我可以确认我将它们全部压缩到一层中，所以我不知道这是怎么回事。我错过了什么？
编辑#3：由于我的 SVG 似乎是我一直试图解决的问题。我已经取得了一些进展，但也问了question here。
【问题讨论】：
-
我不明白，你用字体显示字符..为什么你认为你可以用 svg 替换它们？
-
我是这种事情的新手，所以可能是错误的，但据我了解，我将新图标制作为 SVG，然后用它来创建新字体。我从这个问题中得到了这个想法stackoverflow.com/questions/17941120/…
-
@Hogan -- G_T 使用了Icomoon，它允许您使用 SVG 创建自定义字体集以用于网页。
标签： css svg fonts icons font-awesome