stephenhutchings / typicons.font Goto Github PK

View Code? Open in Web Editor NEW

1.4K 63.0 221.0 35.88 MB

336 pixel perfect, all-purpose vector icons in a web-font kit

Home Page: https://www.s-ings.com/typicons

License: Other

CSS 18.43% JavaScript 9.86% HTML 68.86% Handlebars 2.85%

typicons.font's Introduction

Typicons

Visit the website for information on how to use Typicons on your website

Using Typicons

Typicons can be easily installed via npm...

$ npm install typicons.font

...or bower.

$ bower install typicons

Otherwise, the fonts and CSS can be found in src/font/.

SVG source files can be found in src/svg/.

Info

What's new in Typicons? See the changelog.

License

See the licence for more details.

Icons/Artwork

Distributed under CC BY-SA 4.0 licence.

Font

Distributed under SIL Open Font Licence licence.

typicons.font's People

Contributors

Stargazers

Watchers

Forkers

codeblanche abdieffendi zeandcode ankyskywalker openube mohammadamanalikhani shipow ledinhhuy88 additiveinverse exilen sampetuaarios tschoepler virginiarcruz aroundthecorner dshaw815 rodrigoluizgenz diande jordychew93 mrjawfree anahatadesign cristianstan snowmannishboy mrlamont nagyist sulmanen wescawello saadeez broklyngagah pywebdesign fayearth raleighgee patmart annemh2220 nullnotfound panit axlmait seijee perpetuatingcuriosity reubenmoes dxnat fooying fandhi upsyd thefreegroup betomandujano amandasilveira hardikpatelse frankie-666 matheusos nielsbakhuis moscarda mtco htmlstrap oustaman xsynaptic thehyperspacechild madastro keami326 cbernadou ofllibraries riverans birthdayalex illustrastock-tools ankyo zeusbaseweb briph drahma xing53641wen moodoosh modulexcite kgosierankaba addicto dness mordecaikipkorir joeyianni 4amraziz pkdevbox rosie15 csjoblom murugavele arun99178 klaudit nagyistoce moodoo-sh 0ticket shadrack4292 zebbra2014 vamoscheng mokiwis malliaanthony jackieleon langelee cucung lyckade nguyenthanh1308 jinwei1981 sts0mrg0 jenalgit prabhilal glockio

typicons.font's Issues

Combine typicons to a set to get more variants

I would like to contribute just another example how you can use Typicons in a combination of a set of two icons.

I searched for a solution to get more variants of icons. And with your help. providing the typicons.font I found now this solution:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Typicon Set</title>
<link href="../fontdemo/typicons.css" type="text/css" rel="stylesheet" />
<style type="text/css">
.main-icon {
    position: absolute;
    color: #333;
    font-size: 34px;
    line-height: 1em;
}

/* sub-icon can be placed with defining top, right, left, bottom */
.sub-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    color: #333;
    font-size: 16px;
    line-height: 1em;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 0px;
    padding: 1px;
    background-color: #95CF5E;
    color: #fff;
}
</style>
</head>
<body>
    <p>This is an example how to combine two typicons to a set.</p>
    <a href="#"> 
        <span class="main-icon typcn typcn-document-text">
            <span class="sub-icon typcn typcn-tick"></span>
    </span>
    </a>
</body>
</html>

Maybe this is something what you can add to your HowToUse page?

Error when loading fonts in React

Hi,
I'm getting this error when using typicons.font in React:

`Failed to compile.
./node_modules/typicons.font/src/font/typicons.css

Module not found: Can't resolve '../../../css-loader/index.js' in '/home/scit/DESARROLLO/iunir/node_modules/typicons.font/src/font'`

Does anyone how to solve this?
Thanks!

original Typicons.svg lost?

it used in :
https://github.com/stephenhutchings/typicons.font/blob/master/Makefile#L24

but in the master , can not find.

Suggestion: Male, Female and Unknown Gender Icon

Hey everyone,
Firstly i want to thank @stephenhutchings for his great icon set. Its very usefull 👍
But ive missed gender icons like the ones ive described in the title.
Is it possible to add this ones?

git submodule update recursive causes an error after font-builder is checkouted

If used recursive method to load library and all submodules it fails on some .gnulib file

License of css

Hi, @stephenhutchings! In https://github.com/deemp/purescript-css-frameworks, I collect .css files and generate class names for PureScript. I included the typicons.css file there with the CC BY-SA 3.0 license, but recently realized it may be the wrong one. May I leave the typicons.css there? What type of license should I write?

[question] Comment after every `content: '\e14f';`

So after every

content: '\e14f'; /* '' */

you got /* '' */. If I want to remove those comments I need to remove one by one, as every  seems to be a different symbol (remove all with replace is not possible because of this).

I am just wondering what this is for? Do some editors show the actual symbol in the CSS-file? Why keep those comment?

keep symbol encodings the same with new versions

After grabbing your newer set I noticed that the icons on my Site changed. This is because I am NOT working with classes from typicon for my symbols. The CSS is manually set...

With a newer version the symbol encodings change for some reason. This makes updating versions very time consuming.

I noted this directly via twitter some time ago, but thought this is actually the right place to put it.

[request] new icons

Thanks for the great work on Typicons. I don't know if you are still planning on adding more, but if I may suggest a few, here is a short list (I can write a [request] for each if needed):

money/currency/USD icon (example here, here, or here)
question icon to complement the typcn-info icon (example here)
undo icon, essentially the horizontally flipped version of the typcn-refresh icon (example here)
table/tabular icon (example here)
broken link icon to match the typcn-link icon (example here)
external link icon (example here)
bug icon (example here)
smiley icon (example here)
eye slash icon to match the typcn-eye icon (example here)
sign in and sign out icons (example here and here)
some spinner icons, which could be made to rotate using a typcn-spin CSS3 animation class (see here and here). Right now I'm using the typcn-spiral icon, unfortunately it is not quite centered, therefore it wobbles when animated.

Thanks

CSS class for optional sizes

Font Awesome has some classes to get bigger icon: fa-lg (150%), fa-2x, fa-3x. It avoids manually coding font-size. Hope Typicons can also support it. If you think it is useful, I can make a pull request. Thanks for your work, it is a nice icon set!

Music symbols (U+E0C0/1) not showing up

I'm using Typicons 2.1.2 on Ubuntu 21.04.

Sass rewriting

Hi there,

I enjoy to use Typicon everywhere, but, like numerous of people, I need to rewrite Typicon for at least one thing (the font folder).

So, Font-awesome and Bootstrap-sass have both an $icon-font-path variable that make our world a bit more easier.

What is your thoughts about that ?

Calendar icon misspelled

The calendar icons are spelled 'calender' (with an 'e' in the end), but should be spelled with an 'a' instead.

Use as a web font like Font Awesome

Greetings, do you have any clues on how to use the font as one would Font Awesome (using a web link) ?

Bower deprecation; add complete project to npm?

Bower is effectively deprecated, would it be possible to expand what's offered through npm to include source files for those of us who roll out own SVG sprite sheets? The issue is the files field in package.json; this whitelists what files are included in the published package and only features compiled fonts and files.

Error when trying to install with bower

I have this error when I try to install with bower:

bower EMALFORMED Failed to read /var/folders/fn/1kz6tqdd2b58vl6lggn7ks4r0000gn/T/jojo/bower/typicons-34528-iNxdxw/bower.json

SVG source files unavailable via Bower

Hi there! Love the icons, but would it be possible to include the SVG source files in the Bower package so developers can automate building their own icon sheets?

Can I flip these icons?

is there any way to flip these icons like left or right ? for example here http://www.typicons.com/
the call icon i want to flip its face to right side. please assist.
Thanks

publish non-minified css with bower

having non-minified version of the css would be super useful, if using usemin or similar.

Clarify licensing?

(via fontello/typicons.font)

I'm a bit confused about the implications of using CC-BY-SA for a font. Do you intend the "SA" part to only apply to derivatives of the font or is it also intended to apply to works using the font (e.g. logos, printed documents, websites or applications)? The latter would be especially unfortunate for applications because CC-BY-SA is not intended to be used as a software license.

CC-BY-SA does not seem to have any explicit provisions for font use, so the definition of a derivative work seems a bit fuzzy. Would you consider switching to a more explicit (e.g. SIL) or more permissive (e.g. CC-BY or MIT) license?

EDIT: This issue probably applies to other fontello fonts released as CC-BY-SA.

using svg icons

Hi!

I just installed typicons via NPM on my project. I've been using with class attribute and they work great.

The issue is I can't resize the icon to the adjust to the size of the container itself as it may vary depending on the user's configuration, so I thought of using the SVG icons but can't find a way to use them as .

On the build folder of the framework I'm using (ionic) I can see something like typicons.107d077d609efa723916.svg and it seems the only reference to typicon's svg.

How should one use a specific SVG icon based on this?

Thank you.

Wrong class for upload icon

I noticed that the cloud/upload icon had the class .typcn-cross instead of e.g. .typcn-upload-cloud.

Usage in iOS

Couldn't find an easy way to contact you. I just created some code to use your font in iOS projects. You can find it at https://github.com/javaboyjunior/typicon-ios.

Thanks for the font!

Mike

"How to Use Typicons" Typo

Hey there,

Thanks so much for these icons! They're great.

Wanted to point out a typo in the "How to Use Typicons" that may cause some issues for people.

The HTML usage example doesn't close the span:


Should be:


Also, in the @font-face paragraph, it says "cross-bwroser solution"

Thanks again!