Hack to customize fork awesome
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
Ondřej Hruška 86bf9c215e
mention the custom css
6 lat temu
Fork-Awesome@285008117b customizer initial 6 lat temu
output customizer initial 6 lat temu
patcher big patcher overhaul, now correctly handling aliases and producing better CSS 6 lat temu
.gitignore big patcher overhaul, now correctly handling aliases and producing better CSS 6 lat temu
.gitmodules customizer initial 6 lat temu
README.md mention the custom css 6 lat temu
build.sh big patcher overhaul, now correctly handling aliases and producing better CSS 6 lat temu
install.sh big patcher overhaul, now correctly handling aliases and producing better CSS 6 lat temu
package-lock.json big patcher overhaul, now correctly handling aliases and producing better CSS 6 lat temu
package.json improve package.json 6 lat temu
screenshot.png new screenshot 6 lat temu

README.md

Fork-Awesome customizer

This is a little hack that lets you generate custom Fork-Awesome builds with only a subset of icons.

screenshot

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 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.

<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 &nbsp;). 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="&#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 ---