IPython notebook custom button icons

Question

I'm looking to add a new button to ipython notebook with a custom icon.

Starting from this question, I know I can change around the icons of a custom button using custom.js. However it seems i'm limited to the available icons in fontawesome. Is it possible to get custom button icons?

My understanding is that fontawesome uses svg format, and I found this question/answer, describing the process for fontawesome, however the HTML that IPython uses is a bit different.

The question remains how can I point my icon.svg file to be read by IPython notebook, below is a minimal example in custom.js to add a button, along with the relevant HTML produced.

Minimal button example in custom.js:

IPython.toolbar.add_buttons_group([
{
     'label': 'Create TOC',
     'icon' : 'icon-list', 
  'callback': function(){
    }
}]);

The line 'icon' : 'icon-list', correlates to one of the many icons fontawesome has here

IPython HTML for the above button:

<div class="btn-group">
    <button class="btn" title="Create TOC">
        <i class="icon-list"></i>
    </button>
</div>

Is there a way to customize an icon in IPython notebook without having to add it to fontawesome?

Check this article: http://stackoverflow.com/questions/20290369/ipython-notebook-toolbar-customize — Vyacheslav Yudanov, Jul 16 '14 at 18:55
@VyacheslavYudanov I'm already following this thanks for posting thou! — pyCthon, Jul 16 '14 at 23:40

score 1 · Answer 1 · answered Sep 23 '14 at 10:16

Technically it is doable but slightly more involve that what you would expect. You would need to create your own version of a webfont using smth like icomoon, or fontforge, export-it to a font and css file (the css file probably want to use a private-plane area of unicode which is different than what FA uses).

As IPython 2.x and above support requirejs, you can load the custom font and css with some tricks. Then supposing you are using the cf prefix, you can just use icon:'cf-awesomeicon'.

So what you want to know first is :

How do I create a custom webfont. The rest is (almost) piece of cake.

Then see here for notebook extensions that load css (loading the css should pull the font automatically).

IPython notebook custom button icons

1 Answers1