### DatoCMS plugin to visually select icon from any icon font.

(Image content)

[

**This is a Community Plugin!** Learn how create your own plugin, or copy and remix existing ones in our documentation

](https://www.datocms.com/docs/plugin-sdk/introduction.md)

## DatoCMS Icon Font Picker

(Image content)

DatoCMS plugin to visually select icons from any icon font.

## Features

-   **self-contained**: list of icons and icon font (as base64) are stored in the plugin settings -\> can be used with any icon font
-   **search**: icons can be searched
-   **filters**: optional filters can be used to show only a subset of icons, based on their names

[Preview](https://raw.githubusercontent.com/rolandtoth/datocms-plugin-iconfontpicker/main/docs/preview.gif)

## Configuration

### Plugin settings

[Plugin settings](https://raw.githubusercontent.com/rolandtoth/datocms-plugin-iconfontpicker/main/docs/plugin-settings.png)

#### General Options

A field that holds general options in JSON format.

-   **iconPrefix**: if the icon font requires a prefix CSS class to show up (eg. `my-prefix icon-arrow-right`), you an add it here (optional)

#### Icon Names (required)

The plugin needs to know the icon names (that is, the CSS class names). They can be added as a JSON array in this field.

Example:

```json
[    "icon-menu",    "icon-arrow-left"]
```

These names will be returned when selecting an icon, see the "Usage" section below for more.

#### Filters (optional)

If you would like to add filter checkboxes to the UI, you can set "filters" here.

Filters consist of two parts:

-   name: this will be the checkbox label on the UI
-   value: part of the icon (CSS) class name to match

Example:

```json
[    {      "name": "Arrow icons",      "value": "arrow"    },    {      "name": "Filled icons",      "value": "-fill"    }]
```

#### CSS Styles

The plugin was made to be self-contained and to be used with any icon fonts. Because of this, all font-related CSS should be put here:

-   @font-face in base64 format (the entire font, can be big)
-   individual icon styles, eg. `.icon-arrow-right:before { content: '\ea8a'; }`

### Field settings

After installing the plugin, you'll need to add a new JSON field type to a block or model, go to the Presentation tab, and select "Icon Font Picker" for the Field editor.

[JSON field configuration](https://raw.githubusercontent.com/rolandtoth/datocms-plugin-iconfontpicker/main/docs/json-field-configuration.png)

## Usage

The data structure will be a stringified JSON object with the following structure:

```json
{    "icon": "icon-arrow-right"}
```

You can use it on the frontend by adding as a class to an element, like the way icon fonts are used normally.

## Development

If run locally, the plugin is available at port 3022: `http://localhost:3022`.

## Limitations

-   only one icon font can be used
-   only one icon can be selected

## Acknowledgements

### DatoCMS Font Awesome plugin

This served as the base of this plugin and helped a lot to bring things together easily.

<[https://www.datocms.com/marketplace/plugins/i/datocms-plugin-fontawesome](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-fontawesome.md)\>

### DatoCMS Visual Select plugin

The JsonTextArea used for the plugins was borrowed from here. Great plugin by the way.

<[https://www.datocms.com/marketplace/plugins/i/datocms-plugin-visual-select](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-visual-select.md)\>