OpenWeb Icons WP Registry grade A. No security issues foundWP RegistryNo security issues foundOpen the reportA #1 in Utilities
A font!
Install
Upload it under Plugins → Add New Plugin → Upload Plugin, then activate.
Install straight from GitHub with WP-CLI:
wp plugin install https://github.com/pfefferle/openwebicons/releases/download/2.0.0/openwebicons.zipThe OpenWeb Icons is a web-font that gives you scalable vector icons/logos of some open communities, standards or projects.
It includes the Creative Commons-, HTML5- and Microformats-icons for example. Use them to show your love for the Open Web!
The icons come in three shapes: a web-font with CSS, the plain SVG files, and a WordPress plugin.
Installation
npm (npmjs.org)
$ npm install openwebiconsUsage
Include the CSS in your project:
<link rel="stylesheet" href="node_modules/openwebicons/css/openwebicons.min.css">Then use icons with CSS classes:
<i class="icon-html5"></i>
<i class="icon-mastodon"></i>
<i class="icon-activitypub"></i>
<i class="icon-fediverse"></i>For colored variants, append -colored:
<i class="icon-html5-colored"></i>
<i class="icon-mastodon-colored"></i>WordPress
The repository is also a WordPress plugin. It registers every icon with the icon library that came with WordPress 7.1, so you can pick them in the Icon block like any other icon. It loads no font and no stylesheet, the icons are plain SVG and follow the text color.
There is no release on wordpress.org yet. Build the zip with npm run build:plugin and install it from dist/openwebicons.zip, or take it from a release once one is tagged.
To render an icon in a template:
<?php echo wp_get_icon( 'openwebicons/activitypub', array( 'size' => 32 ) ); ?>Building from Source
npm install
npm run buildThis generates fonts, SCSS variables, CSS files, the composed icons and the demo page.
Build Steps
| Command | Description |
|---|---|
npm run build:fonts |
Generate font files from SVGs + docs HTML via fantasticon |
npm run build:scss |
Generate sass/_vars.scss from icons.json |
npm run build:css |
Compile SCSS to CSS (expanded + minified) |
npm run build:compositions |
Generate composed/ for the multi-glyph icons |
npm run build:docs |
Copy CSS + fonts to docs/ for GitHub Pages |
npm run build |
Run all of the above in sequence |
Other Commands
| Command | Description |
|---|---|
npm run validate |
Check the SVGs, icons.json and the version numbers |
npm run normalize:svg |
Flatten the transforms in svg/ into the path data |
npm run build:plugin |
Build dist/openwebicons.zip, the installable plugin |
npm run env-start |
Start a WordPress at http://localhost:8893 (needs Docker) |
npm run env-stop |
Stop it again |
Contributing
Adding a new icon:
- Add your SVG to
svg/(viewBox"-10 0 1034 1024",fill="currentColor") - Run
npm run normalize:svg, WordPress strips groups and transforms, so the paths have to be flat - Add an entry to
icons.jsonwith a label, the next available codepoint and an optional color - Run
npm run validateandnpm run build - Commit the SVG,
icons.json, and all generated output files - Open a PR
See CONTRIBUTING.md for the details.
Project Page
Browse all icons: https://pfefferle.dev/openwebicons/
Releases
14 releases. Each count is every asset in that release; expand a row for the breakdown.