Get Started!

Using Github's Octicons

Here's how to include/use Github's Octicons in a Canvas Application

Please Note - This example is using v3.5.0, as of version v4.0.0 the project dropped support for Less and changed the paths to the fonts

The Github Octicons project delivers some nice icons that we can easily include & use in a Canvas Applicaiton.

Step 1 - Install Octicons

We could manually create a DynAss & upload the required files, or use the github repo to create a DynAss. However, we're going to use the NPM package to make life simple.

Via the Canvas Admin, locate the site you're working on and using the NPM tool chain install octicons@v3.5.0.

npm octicons

Step 2 - @import Octicons

We're using LessCSS in this example, but the following should be the same for SASS.

// Octicons : https://octicons.github.com/
@import "../../../__node__/node_modules/octicons/octicons/octicons.less";

This assume you're Less file is located in a folder, say /css, off the root of your DynAss.

Step 3 - Add rewrites for font files

If you were to navigte to a page with an octicon rendered you'd noticed that the font files would return 404 error. This is because CSS paths are relative, so we add the following rewrites :

  • Octicon TTF

    • Request Path /css/__tmp__/octicons.ttf
    • Rewrite Path /__node__/node_modules/octicons/octicons/octicons.ttf
  • Octicon WOFF

    • Request Path /css/__tmp__/octicons.woff
    • Rewrite Path /__node__/node_modules/octicons/octicons/octicons.woff

Note that the CSS PreProcessors write the CSS files to /css/__tmp__/<md5-file-sum>.css

Step 4 - Include an icon

Using the icon is trivial here's an example from the Octicon docs:

<!-- for 16px icons -->
<span class="octicon octicon-gist-secret"></span>

<!-- for 32px icons -->
<span class="mega-octicon octicon-gist-secret"></span>

Which would produce :

Manipulate the size

If you want to increase the size of the icon then you can adjust the element's font-size :

256px example

<span class="octicon octicon-gist-secret" style="font-size:256px"></span>

Of course, I'd use a CSS class rather than the attribute in normal situations