🎈 Welcome to the Marketplace — Explore and discover the ecosystem around DatoCMS, and share your own work with the community!

Icon Font Picker

DatoCMS plugin to visually select icon from any icon font.

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

DatoCMS Icon Font Picker

Cover

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

Configuration

Plugin settings

Plugin settings

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:

[
"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:

[
{
"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

Usage

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

{
"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

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

Icon Font Picker
DatoCMS plugin to visually select icon from any icon fo…
Publisher
Author gravatartproli
Package
Visit NPM
Current version
0.1.2
Installs count
Last update