-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Any plans for Ligature's ? #12
Comments
Hi @the-real-adammork - can you expand on this please? :) |
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. |
No reason to close this - I would still consider implementing it on this repo as well |
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 |
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 :) |
How is the status of this feature request? |
I was able to work around this!
{
"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)
@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';
}
<!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 |
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 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 🤷♂️ |
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 :) |
Wondering if this is in the works or been considered previously. Thanks
The text was updated successfully, but these errors were encountered: