How to allow content authors to add icons to links?

Question

Does anybody allow their content authors to add icons to links? If so, how do you do this? I'm considering the best approaches.

I allow them to make links, and to make those links into buttons (the "Styles" menu of WYGWAM has button options when a link is selected, adding the "btn" classes), but I don't yet know of a good way to also allow icon selection. I currently do it by hand with the tag. But if I can make it easy on content authors to do this, all the better.

Will be using EE5/latest Font Awesome.

Answer 1

How far are you capable and willing to go? One method is to create a plugin for CKEditor:

https://stackoverflow.com/questions/1957156/how-to-add-a-custom-button-to-the-toolbar-that-calls-a-javascript-function

I've done something like this a few times to add functionality to Wygwam fields. If you choose this route, you'll need to tell Wygwam to load your custom style.js file, and you'll need to install your plugin into the core CKEditor files yourself.

Setting a custom styles.js file:
https://eeharbor.com/wygwam/documentation/style_set

Where to install plugins for CKEditor (which Wygwam uses): {your_web_root}/themes/user/wygwam/lib/ckeditor/plugins

Based on the SE link I provided, you may be able to add a simple button by just creating your custom styles.js file and applying it (quoting code from an answer in the link provided):

editor = CKEDITOR.replace('container'); // bind editor

editor.addCommand("mySimpleCommand", { // create named command
    exec: function(edt) {
        alert(edt.getData());
    }
});

editor.ui.addButton('SuperButton', { // add new button and bind our command
    label: "Click me",
    command: 'mySimpleCommand',
    toolbar: 'insert',
    icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});

So create your styles.js file, add code like above, and set your Wygwam field to use that styles.js file.