kudakurage / ligaturesymbols Goto Github PK

Ligature Symbols is WebFont project to display the symbol with a ligature features. This Font is licensed under the SIL Open Font License.

Home Page: http://kudakurage.com/ligature_symbols/

ligaturesymbols's Introduction

Ligature Symbols

Ligature Symbols is WebFont project to display the symbol with a ligature features.I created this font by using FontForge (open source postscript font editor). If you want to learn more, you may read my blog entry. Demo: http://kudakurage.com/ligature_symbols/

Browser Support

Ligature Symbols works in all major browsers (Chrome, Firefox, Safari, Opera, IE, iOS, Android)

Sample HTML

<p>Simple use for mailto link.</p>
<a href="mailto:[email protected]" class="lsf">mail</a>

<p>Use tha icon with text.</p>
<a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a>

Sample CSS

@font-face {
    font-family: 'LigatureSymbols';
    src: url('LigatureSymbols.eot');
    src: url('LigatureSymbols.eot?#iefix') format('embedded-opentype'),
         url('LigatureSymbols.woff') format('woff'),
         url('LigatureSymbols.ttf') format('truetype'),
         url('LigatureSymbols.svg#LigatureSymbols') format('svg');
    src: url('LigatureSymbols.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf, .lsf-icon:before {
    font-family: 'LigatureSymbols';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
       -moz-font-smoothing: antialiased;
        -ms-font-smoothing: antialiased;
         -o-font-smoothing: antialiased;
            font-smoothing: antialiased;
}

.lsf-icon:before {
    content: attr(title);
    margin-right: .3em;
    font-size: 130%;
}

License

You can get Ligature Symbols for free. This Font is licensed under the SIL Open Font License.

ligaturesymbols's People

Contributors

Stargazers

Watchers

Forkers

asdi kmikzjh linyows matthewmueller michellelaralin josesmith1 iamsahmad kanzmrsw raleighgee webin frankie-666 jackchi nagyist stanwmusic ilhamgusti jackia

ligaturesymbols's Issues

Possibility to add the Mastodon icon?

Do you know the social network Mastodon? It would be nice to add this icon

Add unicode hex values for CSS pseudo element

You can't use html entities in a css pseudo element, because it inserts the ampersand and everything :

a:before { content: '&#xe139;'; }

In order to get it to work, you have to use the unicode hex values, which are stupid hard to figure out:

a:before { content: '\E139'; }

I had to use this unicode code converter to get the proper codepoints, but it would be super awesome if you provided them to begin with along with the html entities.

Great font, BTW!

Does not work in IE8 and Safari 5.1

FontAwesome does work in those browsers, so perhaps it has to do with the unicode mapping. You could try to use different character addresses.

Won't work in Windows Phone 8

Embedded the ttf version of the font (Content, Copy Always). This is the XAML code:

In the designer, it correctly shows the walk symbol. On the device, however, it display a border-only rectangle. Seems it cannot find / display the character - could this be due to the fact how the font was built using ligature?

And in extension - could this font be rebuilt as simple characters much like font awesome and others?

icons got all black

Sorry, here is my first touch with LigatureSymbols:
http://i.imgur.com/JjCHI

here is my css:

/* http://kudakurage.com/ligature_symbols */

@font-face {
    font-family: 'LigatureSymbols';
    src: url('../font/LigatureSymbols.eot');
    src: url('../font/LigatureSymbols.eot?#iefix') format('embedded-opentype'),
         url('../font/LigatureSymbols.woff') format('woff'),
         url('../font/LigatureSymbols.ttf') format('truetype'),
         url('../font/LigatureSymbols.svg#LigatureSymbols') format('svg');
    src: url('../font/LigatureSymbols.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf, .lsf-icon:before {
    font-family: 'LigatureSymbols';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
       -moz-font-smoothing: antialiased;
        -ms-font-smoothing: antialiased;
         -o-font-smoothing: antialiased;
            font-smoothing: antialiased;
}

.lsf-icon:before {
    content: attr(title);
    margin-right: .3em;
    font-size: 130%;
}

here is my html:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <title></title>

    <link rel="stylesheet" type="test/css" href="assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="assets/css/lsf.css">

    <script type="text/javascript" charset="utf-8" src="assets/js/modernizr.js"></script>
</head>
<body>
    <!--[if lt IE 7]>
        <p class="chromeframe"><a href="http://browsehappy.com/">You will live much happier without IE.</a></p>
    <![endif]-->

    <h1 class="lsf">love</h1>
    <h1 class="lsf-icon" title="chrome"></h1>

    <script type="text/javascript" charset="utf-8" src="assets/js/jquery.js"></script>
</body>
</html>

case-sensitive

when there's a text-transform: uppercase somewhere in the CSS, the icons won't render. I think this is as simple as explicitly setting:

.lsf {
  text-transform: lowercase;
}

does not work in Chrome on Windows XP

I believe this is due to Chrome bug 22240. Perhaps you could note this on the web page to raise awareness and encourage contribution of a patch? I'd love to use LigatureSymbols, but we require that it must work in Chrome on Windows XP, so until then I can't use it. 😢

Thanks for the great work on LigatureSymbols anyway, it's beautiful.

Request: Cleaner Youtube icon

Something like Youtube’s current favicon might be more in keeping with the clarity and simplicity of the other logos.

Needs a Tux/Linux icon

Wonderful, it means I can leave the famfam icons behind, almost, need a Tux/Linux icon

https://www.google.com.au/search?q=linux+tux&tbm=isch

Calendar is spelled wrong

In both calendar and dailycalendar, it is currently spelled calender.

Great work, BTW! Outside of HTML/CSS awesomeness, it really speeds up design time in Photoshop too. Cheers.

Ubuntu logo

I'd love to see an ubuntu logo icon!

Love the font, btw! Keep up the great work!

Wont work in Opera or IE(9)

I'm afraid I cant get this work work in Opera or IE. All that is shown is the attribute itself

the words file, print etc are shown instead of the icons. Its the same if I use Opera to go to your site to view the icons page. Works great in Firefox and Chrome

Specifying the icon word e.g 'twitter' does not work in Firefox Mac

I am experiencing a strange issue where the icons are not being rendered when specified as a word but they are working we specified as unicode. This is only happening in Firefox. For example:

.icon { content: 'twitter'; } // fails
.icon { content: '\E12f'; } // works

Any ideas why Firefox may be struggling with this?

IE & YAPC logo, disappeared in IE / Chrome (Win 7)

In IE 11 or Google Chrome 23, under Windows 7 (x64),
IE logo only displayed when I use "ie" string,
disappeared when use "internetexplorer".

YAPC Asia logo only displayed when I use "yapcasialogo",
disappeared when use "yapcasialogomark".

But these logos displayed correctly in Chrome under Mac OS X.

I tested it on the LigatureSymbols official site and
changed string by Chrome's Developer Tools.

Steam

I'd love to see a Steam logo!

soundcloud?

A soundcloud logo would be awesome!

http://www.soundcloud.com

[enhancement] Add missing bower.json.

Hey, maintainer(s) of kudakurage/LigatureSymbols!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library kudakurage/LigatureSymbols is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "kudakurage/LigatureSymbols",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Suggestion: Release on CDNJS.com

CDNJS is a free Content Delivery Network hosted by CloudFlare for open source, community-driven projects. It would be great to release Ligature Symbols on CDNJS for all to use.

Instructions to add a project to CDNJS:
https://github.com/cdnjs/cdnjs

Or you can simply add a tag to current version, and I'll do the rest.

git tag 2.11
git push --tags

Yelp

Would be really nice to get a Yelp icon.

Doesn't work on Android

I tried on Sony Experia (2.1) as well as on Galaxy Note (4.1)