Adding More Font Icons to Shopify’s Timber Framework

While building a new custom Shopify theme for a customer, I ran across the need for additional icons besides the 30 or so that come stock with Timber’s icon font. Here are the fonts that come with Timber out-of-the-box: https://shopify.github.io/Timber/#icons

This icon set is clearly lacking, but luckily Timber uses IcoMoon as their icon font of choice. While Timber doesn’t automatically include every icon in the IcoMoon library, we can rather easily add any IcoMoon icon we need. Here’s how:

1. If you already have your theme downloaded locally, you can skip this step. Otherwise, you’ll need to download a copy of the /assets/icons.json file in your theme. This can be done several ways:
   1. In your Shopify store admin dashboard, go to Online Store > Themes > Actions > Edit Code then browse to Assets/icons.json. Copy and paste the entire contents of the file into a new file on your computer called icons.json.
   2. In your Shopify store admin dashboard, go to Online Store > Themes > Actions > Download Theme File
   3. By using the command line tool Theme Kit (https://shopify.github.io/themekit/)
2. Browse to https://icomoon.io/app
3. Import the icons.json file from your theme into IcoMoon. If you have downloaded the entire theme, this file is located in the Assets directory.
4. If asked to import all the settings from your json file, say ‘Yes’.
5. Now you are shown all the icons that are currently in the set. Scroll down, and select the icons you wish to add by clicking on them.
6. Once you have selected the fonts you wish to add, click Generate Font in the lower right corner, and then click the Download button. A zip file containing some necessary files is downloaded to your computer.
7. Now we need to replace the icon files in your theme with the icon files that you downloaded. Open the downloaded zip file, extracting if necessary, then:
   1. Rename selection.json to icons.json
   2. Rename fonts/icomoon.ttf to icons.ttf
   3. Rename fonts/icomoon.eot to icons.eot
   4. Rename fonts/icomoon.woff to icons.woff
   5. Rename fonts/icomoon.svg to icons.svg
8. Upload icons.json, icons.ttf, icons.eot, icons.woff, and icons.svg into the Assets directory of your theme, replacing the existing files. (It’s always a good idea to make a backup of the original files just in case something doesn’t work and you need to revert your changes)
9. Now you need to tell your theme’s CSS that these new icons exist. Go back to the zip file you downloaded from IcoMoon and open style.css in a text editor.
10. Scroll all the way to the bottom of the CSS file. You’ll notice that each of the new icons you added will have a CSS rule similar to this:

    .icon-books:before {
        content: "\e920";
    }

11. Copy all the CSS rules for the icons you added. As of 12/5/17, the last icon in the original set is .icon-rss so you should just be able to copy everything below the .icon-rss CSS rule.
12. Back in your theme files, open the main CSS stylesheet for the theme which is Assets/timber.scss.liquid. Find the Icon Mapping section (around line 1675). Paste your new icon’s CSS rules at the bottom of this section, after .icon-youtube:before { content: "\79"; }

There you have it. You can now access any IcoMoon icon from within your Timber Shopify theme. The CSS rule for your icon corresponds to the CSS class you just pasted into the main stylesheet. In my example, I can display the books icon using

<span class="icon icon-books"></span>

.