#StackBounty: #css #svg #fonts #icons #font-awesome Custom icon in static website

Bounty: 50

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.

enter image description here

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.
enter image description here

enter image description here

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:
    
This one with my cusom icon does not:
</body> </html>

This is what the output looks like:

enter image description here

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


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.