我正在構建一個靜態網站，用作R blogdown程序包的博客，該程序包充當靜態網站生成器的包裝。靜態網站中的自定義圖標
我希望在標題下面有一行社交媒體圖標，我已經使用FontAwesome工具包取得了一些成果，該工具包已被我選擇的主題使用。
但是我想包括一些圖標不在工具包中。有些我在Academions項目中找到了一個，我在Inkscape中創建了一個單層SVG。這是一個方形的口袋圖標。
我結合他們都到使用Icomoon應用自定義字體（稱爲customfonts）和放置的字體在我的雨果靜態/ fonts目錄，並在我的靜態/ CSS目錄中的CSS文件。我還修改了CSS文件中的文件路徑以指向靜態/字體目錄，並將其添加到類似於FontAwesome CSS文件中的樣式類中。
我在頁腳中調用了CSS文件，並試圖插入圖標。
當我使用從Academicons字體原來的圖標，像這樣一個：
<i class="cf cf-GoogleScholar cf-3x"></i>
我得到的圖標，但是當我嘗試插入，像這樣我的自定義圖標：
<i class="cf-pocket-square cf-3x"></i>
我沒有看到圖標顯示。
當我檢查HTML時，我可以在代碼中看到它。 
有因此必須什麼問題我做了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替換它們？ – Hogan
我對這類事情很陌生，所以可能是錯誤的，但據我瞭解，我將新圖標作爲SVG，然後用它來創建一個新的字體。我從這個問題得到了這個想法http://stackoverflow.com/questions/17941120/how-can-i-edit-font-awesome-or-include-my-own-icons –
@Hogan - G_T used [Icomoon] （https://icomoon.io/），它允許您從SVG中創建用於網頁的自定義字體集。 –