# ProIcons Webfont

<p>
    <a href="https://github.com/ProCode-Software/proicons/releases">
        <img src="https://img.shields.io/github/v/release/ProCode-Software/proicons?style=for-the-badge"
            alt="Version">
    </a>
    <a href="https://github.com/ProCode-Software/proicons">
        <img src="https://img.shields.io/github/stars/ProCode-Software/proicons?style=for-the-badge"
            alt="Stars">
    </a>
    <a href="https://www.npmjs.com/package/@proicons/webfont">
        <img src="https://img.shields.io/npm/dm/@proicons/webfont?label=downloads&style=for-the-badge"
            alt="NPM Package">
    </a>
    <a href="https://github.com/ProCode-Software/proicons/blob/main/LICENSE">
        <img src="https://img.shields.io/github/license/ProCode-Software/proicons?style=for-the-badge"
            alt="License">
    </a>
</p>

<img src="https://raw.githubusercontent.com/ProCode-Software/proicons/main/.github/images/github-cover_light.png#gh-light-mode-only">
<img src="https://raw.githubusercontent.com/ProCode-Software/proicons/main/.github/images/github-cover_dark.png#gh-dark-mode-only">

<p align="center">
<br>
🔡 Use <a href="https://github.com/ProCode-Software/proicons" target="_blank">ProIcons</a> as a webfont on your site without the need of using scripts.
<br>
<a href="https://procode-software.github.io/proicons/icons">Browse icons</a> | 
<a href="https://procode-software.github.io/proicons/docs/webfont">Documentation</a> | 
<a href="https://github.com/ProCode-Software/proicons/tree/main/packages/proicons-webfont">GitHub</a> | 
<a href="https://www.npmjs.com/package/@proicons/webfont">NPM</a>
</p>

## Features

- Works out of the box, no scripts needed.
- Contains TTF, WOFF, WOFF2 and EOT formats

**[Read the full documentation here](https://procode-software.github.io/proicons/docs/webfont)**

## Installation

### Import via UNPKG

```html
<link rel="stylesheet" href="https://unpkg.com/@proicons/webfont" />
```

### Install via NPM

```shell
npm install @proicons/webfont
```

```html
<link rel="stylesheet" href="path/to/@proicons/webfont/ProIcons.css" />
```

## Usage

Import a ProIcon by creating an `<i>` element with the class `proicon-[icon name]`. Make sure the icon name is in kebab-case.

To import the Add icon:

```html
<i class="proicon-add"></i>
```

## Request an icon

If an icon you want isn't in the set, you can request an icon in [discussions](https://github.com/ProCode-Software/proicons/discussions/categories/icon-requests).

## Contributing

For more info on how to contribute, please see our [contributing guide](https://github.com/ProCode-Software/proicons/blob/main/CONTRIBUTING.md).
