{"id":23291023,"url":"https://github.com/jplusplus/iconfont","last_synced_at":"2025-06-19T01:39:03.453Z","repository":{"id":32629498,"uuid":"36215544","full_name":"jplusplus/iconfont","owner":"jplusplus","description":"Font with commonly used icons, including a j++ logo, for use across projects","archived":false,"fork":false,"pushed_at":"2017-11-01T13:20:24.000Z","size":10,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-14T04:55:28.720Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jplusplus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-25T07:02:14.000Z","updated_at":"2017-04-12T21:45:49.000Z","dependencies_parsed_at":"2022-09-08T00:52:26.425Z","dependency_job_id":null,"html_url":"https://github.com/jplusplus/iconfont","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jplusplus/iconfont","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplusplus%2Ficonfont","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplusplus%2Ficonfont/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplusplus%2Ficonfont/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplusplus%2Ficonfont/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jplusplus","download_url":"https://codeload.github.com/jplusplus/iconfont/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplusplus%2Ficonfont/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260665192,"owners_count":23044267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-20T05:13:53.748Z","updated_at":"2025-06-19T01:38:58.435Z","avatar_url":"https://github.com/jplusplus.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"#Icons for J++\n\nThis repo contains a symbol font, for use across J++ projects. A few social media icons, and a J++ logo.\n\nFonts are generated using IcoMoon, and stored at Amazon S3, behind the Cloudfront CDN.\n\nIf you are going to use only one or a few icons, consider [Pirhoo's logo.js](https://github.com/Pirhoo/logo.js).\n\n##Examples\n\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"example.css\"\u003e\n    \n    Share on Facebook: \u003ca href=\"https://www.facebook.com/sharer/sharer.php?u=http://jplusplus.se\" class=\"fonticon\"\u003ef\u003c/a\u003e\n\n    A J++-logo:\n    \u003cspan class=\"fonticon jpluspluslogo\"\u003e\n        \u003cspan\u003ej\u003c/span\u003e\u003cspan\u003e+\u003c/span\u003e\u003cspan\u003e+\u003c/span\u003e\n    \u003c/span\u003e\n\nAlternatively, you can use pseudo elements:\n\n    It's a bird! \u003cspan class=\"twitter-icon\"\u003e\u003c/span\u003e\n\nEither way, make sure that the content makes sense for people using screen readers, and for browsers that don't handle CSS fonts well.\n\n## Glyphs\n\n* `t`: Twitter logo\n* `f`: Facebook logo\n* `i`: LinkedIn logo\n* `g`: Google+ logo\n* `w`: WhatsApp logo\n* `s`: Snapchat logo\n* `p`: Pinterest logo\n* `m`: Email symbol\n* `d`: Download symbol\n* `j`: The 'j' of the J++ logo\n* `+`: The '+' of the J++ logo\n* `☰`: A menu icon (“hamburger” icon)\n\n## CSS\n\nThe font can be either loaded from Amazon (pro: caching, con: extra http request), or embedded in the CSS (pro: no extra request, con: increased CSS size and no caching).\n\n**From Amazon**\n\n    @font-face {\n        font-family: 'jplusplus';\n        src:url('//static.jplusplus.se/iconfonts/jplusplus.eot?c3');\n        src:url('//static.jplusplus.se/iconfonts/jplusplus.eot?#iefixc3') format('embedded-opentype'),\n            url('//static.jplusplus.se/iconfonts/jplusplus.woff?c3') format('woff'),\n            url('//static.jplusplus.se/iconfonts/jplusplus.ttf?c3') format('truetype'),\n            url('//static.jplusplus.se/iconfonts/jplusplus.svg?c3#jplusplus') format('svg');\n        font-weight: normal;\n        font-style: normal;\n    }\n\n**Embedded**\n\n    @font-face {\n        font-family: 'jplusplus';\n        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');\n        font-weight: normal;\n        font-style: normal;\n    }\n\n## Implementation\n\nIt can be implemented with pseudo elements, or by actually printing letters in the markup. Either way, you'll have to take screenreaders and old browsers into considerations. Here are some boilerplates, trying to take accessability into account.\n\n### Printing glyphs\n\n**CSS**\n\n    .fonticon {\n        font-family: 'jplusplus';\n        speak: none;\n        font-style: normal;font-weight: normal;\n        font-variant: normal;text-transform: none;\n        line-height: 1;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n    }\n\n**HTML**\n\n    Share on Twitter \u003cspan class=\"fonticon\" aria-label=\"Twitter logo\" title=\"Twitter\"\u003et\u003c/span\u003e\n\n**Pug**\n\n    p Share on Twitter\n      span(aria-label=\"Twitter logo\") t\n\n\n### Pseudo elements\n\n**CSS**\n\n    .twitter-icon:before {\n        font-family: 'jplusplus';\n        content: 't';\n        speak: none;\n        font-style: normal;font-weight: normal;\n        font-variant: normal;text-transform: none;\n        line-height: 1;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n    }\n    .visuallyhidden { \n        position: absolute; \n        overflow: hidden; \n        clip: rect(0 0 0 0); \n        height: 1px; width: 1px; \n        margin: -1px; padding: 0; border: 0; \n    }\n\n**HTML**\n\n    Share on Twitter \u003cspan class=\"twitter-icon\"\u003e\u003c/span\u003e\u003cspan class=\"visually-hidden\"\u003eTwitter\u003c/span\u003e\n\n**Pug**\n\n    p Share on Twitter\n      span.twitter-icon t\n      span.visually-hidden Twitter","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjplusplus%2Ficonfont","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjplusplus%2Ficonfont","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjplusplus%2Ficonfont/lists"}