improved readme

master
Ondřej Hruška 6 years ago
parent 30d2922bf9
commit c5281abf48
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 27
      README.md

@ -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 `&nbsp;`).
Another way to add the icon to an element is by adding `data-icon="&#1234;"` where `&#1234;` 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="&#x1F600;"></i> this is a grinning face emoji
```
--- EOF ---

Loading…
Cancel
Save