I am building a static website to use as a blog with the R blogdown package which acts as a wrapper for the Hugo static website generator.
I would like to have a line of social media icons immediately underneath the title which I have achieved somewhat using the FontAwesome toolkit which was already being used by the theme I chose.
However I would like to include some icons not present in the toolkit. Some I found in the Academions project and one I made myself as a single layer SVG in Inkscape. It is a square icon for Pocket.
I combined them all into a custom font (called customfonts) using the Icomoon app and placed the fonts in my Hugo static/fonts directory and the CSS file in my static/css directory. I also amended the file paths in the CSS file to point to the static/fonts directory and added in style classes which are like the ones in the FontAwesome CSS file.
I call the CSS files in my page footer and have tried to insert the icons.
When I use one of the icons originally from the Academicons font like so:
<i class="cf cf-GoogleScholar cf-3x"></i>
I get the icon but when I try to insert my custom icon like so:
<i class="cf-pocket-square cf-3x"></i>
I do not get the icon displayed.
When I inspect the HTML I can see it in the code.
There must therefore be something wrong with the SVG I made. However I do not know what that is or how to fix it.
I have placed the SVG I made, the CSS file and the font files in this directory.
How can I get my icon to display?
EDIT: I have added a MWE to the directory linked above.
Here is the 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>
This is what the output looks like:
This is what the top of the CSS file looks like:
@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 ...
Edit #2: @grinmax correctly pointed out that the HTML structure was inconsistent. Following his suggestions gave the following results:
- Change the HTML
- Change the CSS
While the icon is being produced it is not correct as IcoMoon appears to have separated the layers I used to create the icon. However when I look at the SVG I used to make the font I can confirm that I condensed them all into one layer so I don't know hot this is occurring. What am I missing?
EDIT #3: Since it appears my SVG is the problem I have been trying to get it right. I have made some progress but also asked a question here.
