<p>You could use my plugin <a href="https://github.com/carlcs/craft-redactoriconbuttons" rel="nofollow">Redactor Icon Buttons</a>.</p>

<p>It includes the icons from the (old) Redactor 10 editor and you can map icons to buttons via a <code>iconMapping</code> config setting. It also allows to use a custom icon set.</p>

<p>If you still want to write your own plugin, have a look at the source code of P&amp;T’s <a href="https://github.com/pixelandtonic/RedactorClips/blob/master/redactorclips/resources/clips.js" rel="nofollow">Redactor Clips</a> plugin.</p>

CC BY-SA 3.0
2015-12-08T09:37:56.010Z
I will probably stop with that approach altogether. Seems like P&T `replaceRedactorButton` function in app/resources/js/richTextInput.js prevents me from replacing buttons such as link or image where Craft has some work to do to interface with redactor. The problem should exist with your plugin too I believe.
Jérôme Coupé
CC BY-SA 3.0
2015-12-08T10:52:26.527Z
I found a way to get around this using [`setTimeout()`](https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout), see https://github.com/carlcs/craft-redactorinlinestyles/blob/master/redactorinlinestyles/resources/redactorinlinestyles.js#L89
carlcs
CC BY-SA 3.0
2015-12-08T14:35:36.527Z
Yep I guess that would work, thanks. Becoming a bit fidgety for my taste, though
Jérôme Coupé
CC BY-SA 3.0
2015-12-12T20:54:55.397Z
I personally hate the all-text toolbar; I've found some users glossed over it completely, so thank you Christian for bringing Redactor back to its former glory. Should be noted your CP CSS just shows them on small screens though, removing that bit works great.
RitterKnight
CC BY-SA 3.0
2015-12-08T08:30:57.103Z
2016-07-10T11:13:48.457Z
2016-07-10T11:13:48.457Z
carlcs
<p>I am trying to replace the text-based buttons in Redactor 2 with graphical ones as per this article on the imperavi website:
<a href="https://imperavi.com/redactor/examples/buttons-default-icons/" rel="nofollow noreferrer">https://imperavi.com/redactor/examples/buttons-default-icons/</a></p>

<p>I created a simple plugin loading a JS file (a copy and paste of the JS on the page above) and a CSS file (fontawesome.min.css). These two files and the fonts are in the <code>resources/</code> folder of the plugin. Example of plugin file in this post: 
<a href="https://craftcms.stackexchange.com/questions/267/can-a-plugin-add-js-or-css-to-the-control-panel">Can a plugin add JS or CSS to the control panel?</a></p>

<p>Everything seems to work fine: CSS file loaded in the head and JS file loaded right before the <code>&lt;/body&gt;</code> tag.</p>

<p>My problem is that the JS loaded by my plugin comes <em>before</em> the main JS redactor file. Console barfs an error at me for trying to work with <code>$.Redactor.prototype</code>, which obviously does not exists yet.</p>

<p>Is there an easy way for my plugin to load the JS file at the end of the JS queue or at least after the main redactor JS file ? </p>

<p><strong>EDIT 1:</strong></p>

<p>Following Carl's advises below, I managed to get it working.</p>

<p>Basically, the approach is to create a <code>RedactorPlugins</code> object and populate it with what you need so it is available for redactor when it runs afterwards. The plugin you create that way can be used in your redactor config files.</p>

<p>Something like</p>

<pre><code>if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.iconbuttons = function()
{
  return {
      init: function ()
      {
          var icons = {
              'format': '&lt;i class="fa fa-paragraph"&gt;&lt;/i&gt;',
              'lists': '&lt;i class="fa fa-list"&gt;&lt;/i&gt;',
              'horizontalrule': '&lt;i class="fa fa-minus"&gt;&lt;/i&gt;',
              'image': '&lt;i class="fa fa-picture-o"&gt;&lt;/i&gt;',
              'link': '&lt;i class="fa fa-link"&gt;&lt;/i&gt;'
          };

          $.each(this.button.all(), $.proxy(function(i,s)
          {
              var key = $(s).attr('rel');

              if (typeof icons[key] !== 'undefined')
              {
                  var icon = icons[key];
                  var button = this.button.get(key);
                  alert(key + " - " + button + " - " + icon);
                  this.button.setIcon(button, icon);
              }

          }, this));
      }
  };
};
</code></pre>

<p>Once you have created a plugin loading this JS file and the CSS you need, you can tell Redactor to use that plugin in your redactor config files:</p>

<pre><code>"plugins": [ "iconbuttons", "source" ]
</code></pre>

<p><strong>EDIT 2:</strong></p>

<p>I will probably abandon this altogether and roll with the default text-based version of redactor 2. It looks like this approach does not work with some buttons where Craft has to do some work. It seems that when the <code>replaceRedactorButton</code> function in <code>craft/app/resources/js/RichTextInput.js</code> is run, it removes buttons customisation.</p>

<plugins><redactor>
Switch to graphical buttons in Redactor 2
# Switch to graphical buttons in Redactor 2

(Asked by: username_0 on 2015-12-08)

I am trying to replace the text-based buttons in Redactor 2 with graphical ones as per this article on the imperavi website:
https://imperavi.com/redactor/examples/buttons-default-icons/
I created a simple plugin loading a JS file (a copy and paste of the JS on the page above) and a CSS file (fontawesome.min.css). These two files and the fonts are in the resources/ folder of the plugin. Example of plugin file in this post: 
Can a plugin add JS or CSS to the control panel?
Everything seems to work fine: CSS file loaded in the head and JS file loaded right before the  tag.
My problem is that the JS loaded by my plugin comes before the main JS redactor file. Console barfs an error at me for trying to work with $.Redactor.prototype, which obviously does not exists yet.
Is there an easy way for my plugin to load the JS file at the end of the JS queue or at least after the main redactor JS file ? 
EDIT 1:
Following Carl's advises below, I managed to get it working.
Basically, the approach is to create a RedactorPlugins object and populate it with what you need so it is available for redactor when it runs afterwards. The plugin you create that way can be used in your redactor config files.
Something like
if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.iconbuttons = function()
{
  return {
      init: function ()
      {
          var icons = {
              'format': '',
              'lists': '',
              'horizontalrule': '',
              'image': '',
              'link': ''
          };

          $.each(this.button.all(), $.proxy(function(i,s)
          {
              var key = $(s).attr('rel');

              if (typeof icons[key] !== 'undefined')
              {
                  var icon = icons[key];
                  var button = this.button.get(key);
                  alert(key + " - " + button + " - " + icon);
                  this.button.setIcon(button, icon);
              }

          }, this));
      }
  };
};

Once you have created a plugin loading this JS file and the CSS you need, you can tell Redactor to use that plugin in your redactor config files:
"plugins": [ "iconbuttons", "source" ]

EDIT 2:
I will probably abandon this altogether and roll with the default text-based version of redactor 2. It looks like this approach does not work with some buttons where Craft has to do some work. It seems that when the replaceRedactorButton function in craft/app/resources/js/RichTextInput.js is run, it removes buttons customisation.

**Tags:** plugins, redactor


---

## 1 answers

### Answer by username_1 on 2015-12-08. Score: 4 | Accepted answer

You could use my plugin [Redactor Icon Buttons](https://github.com/username_1/craft-redactoriconbuttons).

It includes the icons from the (old) Redactor 10 editor and you can map icons to buttons via a `iconMapping` config setting. It also allows to use a custom icon set.

If you still want to write your own plugin, have a look at the source code of P&T’s [Redactor Clips](https://github.com/pixelandtonic/RedactorClips/blob/master/redactorclips/resources/clips.js) plugin.

> **Comments:**
> **username_0**: I will probably stop with that approach altogether. Seems like P&T `replaceRedactorButton` function in app/resources/js/richTextInput.js prevents me from replacing buttons such as link or image where Craft has some work to do to interface with redactor. The problem should exist with your plugin too I believe.  
> **username_1**: I found a way to get around this using [`setTimeout()`](https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout), see https://github.com/username_1/craft-redactorinlinestyles/blob/master/redactorinlinestyles/resources/redactorinlinestyles.js#L89  
> **username_0**: Yep I guess that would work, thanks. Becoming a bit fidgety for my taste, though  
> **username_2**: I personally hate the all-text toolbar; I've found some users glossed over it completely, so thank you Christian for bringing Redactor back to its former glory. Should be noted your CP CSS just shows them on small screens though, removing that bit works great.  

---

