Table of Contents

Adding a custom social media icon

Hydejack includes a number of social media icons by default (in fact, everything that is provided by IcoMoon), but since the landscape is always changing, it is likely that a platform that is important to you will be missing at some point.

NOTE: You can add any platform by simply providing an URL (just make sure it contains //). However, a fallback icon will be used instead of the platform’s icon.

Creating the icon font

In order to add a custom social media icon you have to use the IcoMoon App (free) to create a custom icon webfont. However, it is important that the generated font include all icons already in use by Hydejack. For this purpose, find the selection.json at assets/icomoon/selection.json and upload it to the app via “Import Icons”. Then, use the app to add your icon(s). Consult the IcoMoon docs for additional help.

Once you’ve created and downloaded the icon font form IconMoon, replace the icomoon folder in assets in it’s entirety. Keep in mind that future updates of Hydejack will override this folder.

Adding the platform’s metadata

In this second step it is necessary, to add the network’s metadata to _data/social.yml. An entry looks like:

  name: DeviantArt
  icon: icon-deviantart
  prepend: "https://"
  append: ""
The name of the network. Used for for the title attribute and screen readers.
The icon CSS class. Can be chosen during the IcoMoon creation process.
Optional. A string that is prepended to the username to form the link to the profile. If the final URL should be https://<username>, this would be https://
Optional. A string that is appended to the username to form the link to the profile. If the final URL should be https://<username>, this would be

Building the JavaScript

NOTE: In order to build the JavaScript you need to have node.js installed. Specifically, the npm command needs to be available, which is part of node.js.

When building for the first time (and after each update of Hydejack) you have to run

$ npm install

This will fetch all dependencies (and put them in a local folder called node_modules), lint the code and write the bundled and minified script into assets/js/hydejack.js.

Subsequent builds are administered via

$ npm run build

If you want to actively develop the scripts, it is better to run

$ npm run dev

which will build a non-minified, non-transpiled (ES6) version of hydejack.js after every filechange.

Actions Speak Louder Than Words!

Powered by Jekyll and Hydejack v7.3.0