82 lines
3.8 KiB
Text
82 lines
3.8 KiB
Text
# {{ font.name }} #
|
|
|
|
|
|
|
|
{{ font.name }} is an icon font containing logos of popular linux distributions and other open source software.
|
|
|
|
*Note:* All brand icons are trademarks of their respective owners and should only be used to represent the company or product to which they refer.
|
|
|
|
## Installation ##
|
|
|
|
Install the font by downloading and unpacking the latest release's zip manually or installing it from npm:
|
|
|
|
npm install {{ font.name }}
|
|
|
|
To use the font, include `assets/{{ font.name }}.css` as well as the
|
|
fonts in your project and use the CSS classes listed below.
|
|
|
|
<link href="/assets/{{ font.name }}.css" rel="stylesheet">
|
|
|
|
Alternatively just link to it using a CDN such as [jsDelivr](//jsdelivr.com):
|
|
|
|
<link href="//cdn.jsdelivr.net/npm/{{ font.name }}@{{ font.version.stable }}/assets/{{ font.name }}.css" rel="stylesheet">
|
|
|
|
## Usage ##
|
|
|
|
Include an icon using the corresponding CSS class in an empty element:
|
|
|
|
<i class="fl-[icon]"></i>
|
|
|
|
Add `fl-fw` as class for a fixed width icon.
|
|
|
|
If you want to insert a glyph of this font on a GNU/Linux system press `Ctrl + Shift + u`, release the keys and then type the code point, for instance: `Ctrl + Shift + u` and `f31a` will insert the `Tux` glyph.
|
|
|
|
Available logos are:
|
|
|
|
{%- macro img(id) %}<img src="vectors/{{ id }}.svg" width="24">{% endmacro %}
|
|
{%- macro class(id) %}`fl-{{ id }}`{% endmacro %}
|
|
{%- macro code(id) %}`<i class="fl-{{ id }}"></i>`{% endmacro %}
|
|
{%- set ids = icons|keys|sort %}
|
|
{%- set nameW = icons|values|column('name')|maxLength %}
|
|
{%- set maxIdLength = ids|maxLength %}
|
|
{%- set imgW = maxIdLength + img("")|length %}
|
|
{%- set classW = maxIdLength + class("")|length %}
|
|
{%- set codeW = maxIdLength + code("")|length %}
|
|
|
|
| {{ "Distribution"|center(nameW) }} | {{ "CSS class"|center(classW) }} | {{ "Code"|center(codeW) }} | Code point | {{ "Image"|center(imgW) }} |
|
|
| {{ "-".repeat(nameW) }} | {{ "-".repeat(classW) }} | {{ "-".repeat(codeW) }} | :--------: | :{{ "-".repeat(imgW-2) }}: |
|
|
{%- for id in ids %}
|
|
{%- set icon=icons[id] %}
|
|
| {{ icon.name.padEnd(nameW) }} | {{ class(id).padEnd(classW) }} | {{ code(id).padEnd(codeW)|safe }} | `0x{{ icon.codepoint.toString(16) }}` | {{ img(id).padEnd(imgW)|safe }} |
|
|
{%- endfor %}
|
|
|
|
## Building ##
|
|
|
|
Make sure you have the following dependencies installed:
|
|
* Node, Python and jq to run the build scripts
|
|
* [FontForge](//fontforge.org) to generate the fonts
|
|
* [wkhtmltopdf](http://wkhtmltopdf.org/) to generate this readme's preview image
|
|
|
|
Then run `npm install`/`yarn install` and `make`.
|
|
|
|
## Releasing ##
|
|
|
|
If you are a maintainer of this repository and a new release is to be published
|
|
* Make sure all PRs (that shall be pulled) are pulled
|
|
* The PRs add new `svg`s in `vectors/`
|
|
* The `icons.tsv` is ammended (i.e. new icons added at the bottom)
|
|
* Every time the `svg`s or `icons.tsv` is touched in the `master` branch (i.e. through pulling) the preview image is updated
|
|
* Note that the `README.md` is NOT updated. You can manually modify it do indicate/add recently added but not released icons.
|
|
* Once the release seems ready:
|
|
* Edit the version number in `package.json` (and push that change to `master`)
|
|
* Trigger the "Draft a Release" workflow manually on the Actions page (on the `master` branch)
|
|
* The workflow will add a git tag for the release
|
|
* Go to the releases list and find the draft release
|
|
* Edit the description etc pp and finally
|
|
* Push "publish release"
|
|
* The release is published on Github
|
|
* Automatically the "Update README" workflow is triggered
|
|
* The `README.md` is regenerated (the preview should already be up to date, see above)
|
|
* Automatically the "Publish release to npm" workflow is triggered
|
|
* If the npm token is not expired the release is pushed to NPM
|
|
* You need to publish on NPM manually if token is expired (expected)
|