Icons

Insert HTML and SVG icons to the content.

Click on an editable block and then on the star icon on the toolbar. Choose an icon from the shown popup and insert it.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor X</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactorx.css">
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactorx.js"></script>
        <script src="/your-folder/plugins/icons.js"></script>

        <!-- call -->
        <script>
        RedactorX('#entry', {
            plugins: ['icons']
        });
        </script>
    </body>
</html>

Usage

The set of icons that will be shown in the popup of the plugin is specified as an array in the setting of the plugin itself. This set can be changed by specifying your own array like this:

RedactorX('#entry', {
    plugins: ['icons'],
    icons: {
        items: [
            '<svg..>',
            '<svg..>',
            '<svg..>'
        ]
    }
});

Icons can be specified as SVG and HTML, for example, here's how to specify the FontAwesome icons:

RedactorX('#entry', {
    plugins: ['icons'],
    icons: {
        items: [
            '<i class="fas fa-address-book"></i>',
            '<i class="fas fa-address-card"></i>',
            '<i class="fas fa-archway"></i>'
        ]
    }
});

Of course, you can mix SVG and HTML icons in one set:

RedactorX('#entry', {
    plugins: ['icons'],
    icons: {
        items: [
            '<svg..>',
            '<svg..>',
            '<i class="fas fa-address-card"></i>',
            '<i class="fas fa-archway"></i>'
        ]
    }
});