diff --git a/README.md b/README.md index e9cb560..e14af8a 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,20 @@ # Phosphor Icons -Phosphor is a kickass and dead-simple set of open-source icons for web and digital media. We aim to provide variety, consistency, and above all, ease-of-use for digital content creators of all kinds. +Phosphor is a kickass and dead-simple set of open-source icons for web and digital media. We aim to provide variety, consistency, and above all, ease-of-use for digital content creators of all kinds. The complete list of icons can be found on [our website](https://phosphoricons.com). ## For developers -Phosphor is available as an icon font, [React package](https://github.com/phosphor-icons/phosphor-react), and [Vue package](https://github.com/phosphor-icons/phosphor-vue), all of which can be sourced from NPM or from a CDN. +Phosphor is available as a [one-liner](https://github.com/phosphor-icons/phosphor-icons) script, [React package](https://github.com/phosphor-icons/phosphor-react), and [Vue package](https://github.com/phosphor-icons/phosphor-vue), all of which can be sourced from NPM or from a CDN. ### HTML/CSS -- **Simple to use** – We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is source the stylesheet, and drop in an icon with an `` tag and the appropriate class: +- **Simple to use** – We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is add the script to the document `
`, and drop in icons with an `` tag and the appropriate class: ```html - + @@ -24,28 +24,7 @@ Phosphor is available as an icon font, [React package](https://github.com/phosph ``` -- **Styleable** – Since the icons are just text under the hood, they can be colored and styled with CSS like any other font, including `font-size`, `color`, etc. We include several helper classes to provide easy sizing if you need it: - -```css -.ph-xxs { font-size: 0.5em; } -.ph-xs { font-size: 0.75em; } -.ph-sm { font-size: 0.875em; } -.ph-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -0.0667em; } -.ph-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -0.075em; } -.ph-1x { font-size: 1em; } -.ph-2x { font-size: 2em; } -.ph-3x { font-size: 3em; } -.ph-4x { font-size: 4em; } -.ph-5x { font-size: 5em; } -.ph-6x { font-size: 6em; } -.ph-7x { font-size: 7em; } -.ph-8x { font-size: 8em; } -.ph-9x { font-size: 9em; } -.ph-10x { font-size: 10em; } -.ph-fw { text-align: center; width: 1.25em; } -``` - -> **Note:** Overriding the `font-family`, `font-style`, `font-weight`, `font-variant`, or `text-transform` may break the icons and render unprintable characters. Don't do it. +Check out the full documentation on the [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) repo page. ### React @@ -113,3 +92,7 @@ Download our [asset kit](https://www.phosphoricons.com/assets/phosphor.zip) to s - **Sketch** - **Illustrator** - **Figma** --> + +## License + +GPL-3.0 © [Phosphor Icons](https://github.com/phosphor-icons)