You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
2.7 KiB
59 lines
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 named `ruby-bundler`)
|
|
- `node`, `npm`
|
|
- `bash`, `make`, `sed`, `head`, `cat`, `git`
|
|
|
|
## How to use it
|
|
|
|
1. 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` and `git submodule update`
|
|
2. Run `./install.sh`. This should prepare the FA submodule for building the font.
|
|
3. Verify that files `wanted.all.ini`, `wanted.none.ini`, `fontcustom.yml` and `fontcustom.default.yml` have been created.
|
|
- You can update Fork-Awesome and these files at any time by running `./install.sh` again.
|
|
4. 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](https://forkawesome.github.io/Fork-Awesome/icons/) for reference.
|
|
5. Adjust `fontconfig.yml` if you wish to give your custom font a different name, or change the class prefix.
|
|
6. Run `./build.sh` to build your customized font.
|
|
7. 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.
|
|
|
|
```html
|
|
<i class="icon-save"></i> abusing the italic element
|
|
```
|
|
|
|
```html
|
|
<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.
|
|
|
|
```html
|
|
<i data-icon="😀"></i> this is a grinning face emoji
|
|
```
|
|
|
|
--- EOF ---
|
|
|