2.7 KiB
Fork-Awesome customizer
This is a little hack that lets you generate custom Fork-Awesome builds with only a subset of icons.
Dependencies
Mostly dependencies of the Fork-Awesome project:
ruby
,bundle
(package may be namedruby-bundler
)node
,npm
bash
,make
,sed
,head
,cat
,git
How to use it
- Make sure you cloned this repository recursively, i.e. the
Fork-Awesome/
folder is not empty.- You can fix that by running
git submodule init
andgit submodule update
- You can fix that by running
- Run
./install.sh
. This should prepare the FA submodule for building the font. - Verify that files
wanted.all.ini
,wanted.none.ini
,fontcustom.yml
andfontcustom.default.yml
have been created.- You can update Fork-Awesome and these files at any time by running
./install.sh
again.
- You can update Fork-Awesome and these files at any time by running
- Copy either of the "wanted" templates to
wanted.ini
, and customize it as needed.- Lines starting with
#
will be excluded. - The INI suffix is used only to make editors highlight it nicely, it's not really an INI file
- You can even use a blank text file and just add the icons you want, with coments on
#
lines - Use the FA icons page for reference.
- Lines starting with
- Adjust
fontconfig.yml
if you wish to give your custom font a different name, or change the class prefix. - Run
./build.sh
to build your customized font. - Retrieve your output files from the
output/
directory.
Using the font
The generated font should be compatible with the Fork-Awesome CSS. However, our CSS is different.
This version does not include any of the FA helper classes (like fa-spin
), and you also don't need to use the fa
class
to apply the font. Simply add the icon class, like fa-star
, to your element, and the icon will appear in
its ::before
pseudo-element. This behavior is similar to fonts generated by fontello.
<i class="icon-save"></i> abusing the italic element
<div class="icon-save"> this works too</div>
Note that the icon does not include any spacing by default. If you want it, add it in your custom CSS, or include spaces
in your HTML (perhaps using
). You can also customize the CSS template in patcher/css-template.css
;
this is used as a header, followed by the icon codes.
Another way to add the icon to an element is by adding data-icon="Ӓ"
where Ӓ
is a character entity
code you copied from the preview HTML. This is a bit harder to use, but may be useful in some situations. You can also
use this method to sneak emoji or other characters into your pages as icons, but you have to html-encode them first.
<i data-icon="😀"></i> this is a grinning face emoji
--- EOF ---