Instructions to create own icon fonts...
https://www.bigwhiteduck.com/posts/custom-icons-with-bwd-stacks
There are several font creation apps that you can use to create icon fonts but these tend to be quite expensive.
Luckily, there are now several free services which allows you to do it, all you need is your icons as SVG files. You can read more about them here.
We are going to use Glyphter for this example and here are the simple steps to do it.
Visit https://glyphter.com
Add as many icons as you want by clicking on the boxes and loading an SVG file for as few or as many letters as you want.
Each time, a window will appear on the left where you can enter the Class Name. This is our icon name, analogous to the fa-home example from FontAwesome.
Click the cog button at the top to set your font name and prefix
As you can see, we have given the prefix a unique name (and changed it from the default icon to ensure we have no conflicts.
The font name is the name of the font that you will load. This is just like any other font such as Proxima-Nova or even Comic Sans (forbid the thought).
Our font is now created and we can download it by clicking the Font button
In your downloads folder, you will now have a folder called glyphter-font
Rename this folder to something more memorable.
Inside this folder are two more folders: css and font
The font folder contains the actual font file itself. You will see multiple types (EOT, TTF, SVG and WOFF). We will just use the WOFF file as it is supported in all modern browsers.
The CSS folder contains the class names that we can use to access the font.
Open the CSS file provided in a text editor and simply paste it all into your Site-Wide CSS code in RapidWeaver.
This CSS defines the font family and the class names that we use to refer to each icon.
Remember to paste as plain text when pasting anything into RapidWeaver
You will now need to edit the URL to your font file. You have 2 options here.
Either self host the font on your server, just like any other webfont Convert it to base64 and enter it into your page CSS directly. To self host, simply FTP the font file to your server and edit the CSS to reflect the correct path.
If, as recommended, you are only using the WOFF file you can delete all the other URLs. Here is what the top part of the as downloaded file looks like fresh from Glyphter:
@font-face {
font-family: 'duck icons';
src: url('../fonts/duck-icons.eot');
src: url('../fonts/duck-icons.eot?#iefix') format('embedded-opentype'),
url('../fonts/duck-icons.woff') format('woff'),
url('../fonts/duck-icons.ttf') format('truetype'),
url('../fonts/duck-icons.svg#duck-icons') format('svg');
font-weight: normal;
font-style: normal;
}
First, just delete the .eot definition completely (the first src: line up to an including the semi-colon.
Next delete all the url definitions except the woff one. Make sure that the line ends in a semicolon and you have removed all the commas between the definitions.
Here is how it should look now, nice and simple:
@font-face {
font-family: 'duck icons';
src: url('http://myserver.com/myfont/duck-icons.woff') format('woff');
font-weight: normal;
font-style: normal;
}
don't forget you will also have the classname definition below it from the original Glyphter file. You don't need to modify this at all.
[class*='bwd-']:before{
display: inline-block;
font-family: 'duck icons';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.bwd-blog-icon:before{content:'\0041';}
Now, to use our icon, we simply enter the prefix of bwd and the Icon Name of blog-icon like so: