|
|
|
@ -28,18 +28,31 @@ Mostly dependencies of the Fork-Awesome project: |
|
|
|
|
6. Run `./build.sh` to build your customized font. |
|
|
|
|
7. Retrieve your output files from the `output/` directory. |
|
|
|
|
|
|
|
|
|
The screenshot shown above was built with the following `wanted.ini`: |
|
|
|
|
## 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. |
|
|
|
|
|
|
|
|
|
``` |
|
|
|
|
fork-awesome |
|
|
|
|
thumbs-up |
|
|
|
|
<i class="icon-save"></i> abusing the italic element |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
and some changes in fontcustom.yml: |
|
|
|
|
``` |
|
|
|
|
<div class="icon-save"> this works too</div> |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
```yml |
|
|
|
|
font_name: TinyFork |
|
|
|
|
css_selector: .lfa-{{glyph}} |
|
|
|
|
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 ` `). |
|
|
|
|
|
|
|
|
|
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 --- |
|
|
|
|