Any plans for Ligature's ? #12

the-real-adammork · 2017-06-22T03:00:47Z

Wondering if this is in the works or been considered previously. Thanks

tancredi · 2017-06-22T11:06:28Z

Hi @the-real-adammork - can you expand on this please? :)

the-real-adammork · 2017-06-22T12:53:56Z

Ligatures is a font feature that traditionally collapses 'ae' or 'fi' from two characters to one. It can be used to collapse 'facebook' to one character. Takes alot of pain out of the process because you dont need to templatize the unicode characters after compiling the icon font.

I ended up grabbing the latest version of https://github.com/sunflowerdeath/webfonts-generator and ligature support is included. I call it directly and this solved my issue.

tancredi · 2017-06-22T12:57:20Z

No reason to close this - I would still consider implementing it on this repo as well

the-real-adammork · 2017-06-22T13:00:27Z

Ok, and you sit ontop of webfonts-generator so it should be pretty straightforward. Ill try and take a crack at it later today.

*didnt mean to close

tancredi · 2017-06-22T13:02:02Z

That would be great, I'm gonna struggle finding time to look at it for a few days - just make sure to test that it works if you wanna open a pull request - thanks :)

Kaishiyoku · 2018-02-02T11:13:19Z

How is the status of this feature request?

BrunnerLivio · 2020-01-03T17:22:11Z

I was able to work around this!
Seems like the underlying library webfonts-generator by @sunflowerdeath has added support for ligatures a long time ago.
Unfortunately, the author of the repository forgot to update the package on NPM. The repository is now read-only and therefore we can't submit issues for that.
To work around this, we can use a specific commit of the Github repository in NPM like so

package.json

{
  "dependencies": {
     "webfonts-generator": "sunflowerdeath/webfonts-generator#ed306cd"
  }
}

In order to correctly reference your icon font, you must use a custom CSS template. (Inspired by Material Design Icons)

template/css.hbs

@font-face {
  font-family: "{{ fontName }}";
  font-style: normal;
  font-weight: 400;
  src: {{{ src }}};
}

{{ baseSelector }} {
  font-family: "{{ fontName }}";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: pre;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

template/html.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ fontName }}</title>

    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 10px 20px;
            text-align: center;
        }
        .preview {
            width: 100px;
            display: inline-block;
            margin: 10px;
        }
        .preview .inner {
            display: inline-block;
            width: 100%;
            text-align: center;
            background: #f5f5f5;
            -webkit-border-radius: 3px 3px 0 0;
            -moz-border-radius: 3px 3px 0 0;
            border-radius: 3px 3px 0 0;
        }
        .preview .inner {{ baseTag }} {
            line-height: 85px;
            font-size: 40px;
            color: #333;
        }
        .label {
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            padding: 5px;
            font-size: 10px;
            font-family: Monaco, monospace;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #ddd;
            -webkit-border-radius: 0 0 3px 3px;
            -moz-border-radius: 0 0 3px 3px;
            border-radius: 0 0 3px 3px;
            color: #666;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="{{ htmlCssRelativePath }}" />
</head>
<body>

    <h1>{{ fontName }}</h1>

    {{# each names }}

        <div class="preview">
            <span class="inner">
                <{{ ../baseTag }} class="{{ ../baseClassNames }}">{{ this }}</{{ ../baseTag }}>
            </span>
            <br>
            <span class="label">{{ this }}</span>
        </div>

    {{/ each }}

</body>
</html>

I execute it like this

icon-font-generator --htmltp template/html.hbs \
  --csstp template/css.hbs \
  -o dist \
  icons/*.svg

From icon-font-generator side of things, I would love to see a --ligature parameter, which will simply use the CSS and HTML template from above. For us using a Github dependency is fine, but I do not know what @tancredi would think of that for this repository? The best option would be of course, to fork and maintain @sunflowerdeath repository, so we could reference an NPM package instead of a Github reference, though I do not know whether you have the capacity for that.

manland · 2020-01-10T11:07:37Z

Hi, thanks for the tip to make it work with liga!

But the woff and woff2 generated haven't ligature for tools other tan web (desktop, photoshop...). I have tracked down this issue and I have a solution :

package.json

{
"scripts": {
    "postinstall": "npm-run-all cleanDepWebfonts cleanDepIconFont",
    "cleanDepWebfonts": "rm -rf node_modules/webfonts-generator/node_modules/svgicons2svgfont",
    "cleanDepIconFont": "rm -rf node_modules/icon-font-generator/node_modules"
  },
  "devDependencies": {
    "icon-font-generator": "=2.1.9",
    "npm-run-all": "=4.1.5",
    "svgicons2svgfont": "manland/svgicons2svgfont#9f3e2ac",
    "webfonts-generator": "sunflowerdeath/webfonts-generator#ed306cd"
  }
}

Explanations :

svgicons2svgfont generate ligature with html unicode (for add it become add) which is perfect for web, but not for desktop font and tools :'(

So in manland/svgicons2svgfont#9f3e2ac I have made a little patch. And all is ok. I have open an issue in svgicons2svgfont but make no sense to fix it in their way. And if they do it, webfonts-generator has very old version , so we can't have it 🤷‍♂️

dennisp93 · 2020-12-08T10:41:05Z

Hi, is it possible to fix this inside this package? Compared to Google's Material Icons the Ligature Feature ist now really common and it would be nice to have it inside the generated fonts. I would not prefer to fork my own version just to set the commit for the webfonts-generator.

Thanks :)

the-real-adammork closed this as completed Jun 22, 2017

tancredi reopened this Jun 22, 2017

the-real-adammork closed this as completed Jun 22, 2017

the-real-adammork reopened this Jun 22, 2017

thepian mentioned this issue May 1, 2021

Is there a plan to support ligatures? tancredi/fantasticon#182

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Any plans for Ligature's ? #12

Any plans for Ligature's ? #12

the-real-adammork commented Jun 22, 2017

tancredi commented Jun 22, 2017

the-real-adammork commented Jun 22, 2017

tancredi commented Jun 22, 2017

the-real-adammork commented Jun 22, 2017 •

edited

Loading

tancredi commented Jun 22, 2017

Kaishiyoku commented Feb 2, 2018

BrunnerLivio commented Jan 3, 2020 •

edited

Loading

manland commented Jan 10, 2020

dennisp93 commented Dec 8, 2020

Any plans for Ligature's ? #12

Any plans for Ligature's ? #12

Comments

the-real-adammork commented Jun 22, 2017

tancredi commented Jun 22, 2017

the-real-adammork commented Jun 22, 2017

tancredi commented Jun 22, 2017

the-real-adammork commented Jun 22, 2017 • edited Loading

tancredi commented Jun 22, 2017

Kaishiyoku commented Feb 2, 2018

BrunnerLivio commented Jan 3, 2020 • edited Loading

manland commented Jan 10, 2020

dennisp93 commented Dec 8, 2020

the-real-adammork commented Jun 22, 2017 •

edited

Loading

BrunnerLivio commented Jan 3, 2020 •

edited

Loading