ACL Icon Font

Code name for the latest iteration of acl-icon-font is Fontastic 4, because we have updated and unified the icons style. It contains all latest icons we use in our applications UI. Fontastic 4 is the go to place for everything related to icon font. Visit icon font cheatsheet. Last but not least, it has all the awesomeness that Sketch, Sketchtool, Node.js and Gulp have to offer.

Use it on your machine acl-icon is a font like other TrueType fonts, therefore it can be used in a design (Sketch, Photoshop, Illustrator, MS Word...) and in HTML.

Set This up on Your Machine

1. Prerequisite

You need a Mac. We use Sketch as primary design tool and it is only available on Mac. So is Sketchtool. You don’t need Sketch if you are not updating the icon. And you don’t need Sketch to install Sketchtool.

In addition, You have latest Node.js installed, Gulp and Harp installed with -g flag. If you don’t:

• Install Node.js. It is recommended to use Nodenv for managing multiple versions of Node.js.

  1. Install nodenv using homebrew: $ brew install nodenv
  2. Install latest version of node.js $ nodenv install v4.0.0

• Install gulp $ npm install -g gulp

• Install harp $ npm install -g harp

2. Install Sketchtool

Sketchtool is now bundled with lasted Sketch app. If you have already installed Sketch, from terminal run:

$ cd /Applications
$ Sketch.app/Contents/Resources/sketchtool/install.sh

That will install the tool in /usr/local/bin, and some required resource files in /usr/local/share/sketchtool.

3. Clone the Repo and Install Dependencies

$ git clone git@github.com:acl-services/acl-icon-font.git
$ cd acl-icon-font
$ npm install

This project is not possible without the following awesome gulp plugin:

• gulp-sketch

Set This up in Your App

Add the following line in your project’s bower.json dependencies:

"acl-icon-font": "https://github.com/acl-services/acl-icon-font.git"

It depends on the project’s build process, you could either link directly to bower_components directory, or copy font file and css to assets folder. acl-ui has a gulp task to copy acl-icon-font assets to its directory.

Bonus: You can also download and install the TTF font file to your system and use it in a design program.

Make Changes to the Icon Font

1. Update the icons in resources/sketch-template/acl-icon.sketch
2. In Terminal cd to acl-icon-font
3. Run $ npm start
   • Note: you may need to run $npm install first
   • Note: now is a good time to make sure Sketch & sketchtool are the same version number
4. Open a new tab and run $ gulp
5. Open up localhost:9000 in a browser to view your changes.
6. After any additional changes & saves to the icon font Sketch file, run $ gulp; gulp
7. Update version in both bower.json and package.json
8. Create a feature branch, commit the changes, and open a pull request.
9. Draft a GitHub release after merging.

Gulp task takes care of:

• Exporting Sketch artboards to svgs.
• Converting svgs to different font formats.
• Updating CSS.
• Updating cheatsheet.

Troubleshooting:

• If icon isn’t updating:
  • Make sure that you have the latest version of Sketch.app installed
  • Make sure sketchtool is up-to-date (see: ‘Install Sketchtool’ section above)
  • Sometimes you have to run gulp several times before the localhost reflects the changes
• If icon updates but looks strange:
  • There are problems with strokes—in Sketch run ‘Convert to Outlines ⇧⌘O’ (warning: Sketch’ convert to outlines is not that great, you may have better results expanding the stroke in Affinity Designer or Adobe Illustrator)
  • If the colors are inverted, you may need to hide a layer in the Sketch file (container layers frequently cause this)

Conventions:

There are a few things to keep in mind:

• Artboard size is 480x480px
• Icon size needs to be in 420x420
• There is 30px padding
• Artboard name needs to be in the following format: nnn.icon-name__tag1__tag2__tag3... Where:
  • nnn ranges from 001 to 999
  • icon-name is the CSS class name and also exported svg filename. Multiple words used in name are separated by -
  • tag is another name you think the icon may also be referred to. A tag is optional but it will be helpful when you need to search for an icon. For example: trash-bin may also be referred as delete.
  • __ (double underscores) is a tag separator.

Tips for Working with Icon Template

1. Keep artboards that have related icons close together. This will give you an overview of the icons.
2. Keep artboard names on side panel in sequential order. This will help you with using unique number for each artboard.

Lazy testing

Want to test an update to the icon font without needing to open a PR, and without downloading the local dev environment for every one of our apps? YES I DO!

1. Prepare the icons: Be sure that the icon is looking good in your local test (i.e. http://localhost:9000)
2. Host the icon files: The updated icon files need to be accessible through a URL. This surely isn’t the only way, but here’s how I did it.
3. Create a public repo (mine is https://github.com/pxsmith/icon-font-testing)
4. Upload the icon files to that repo
5. Inject the CSS: Again, this surely isn’t the only way, but I found it worked.
6. In Chrome, download the cjs plug-in (https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija)
7. Use this code (which is dependent on jQuery) in cjs to access the hosted icon font. I used rawgit.com to serve raw files from the public repo I mentioned above: $('head').append('<style>@font-face{font-family: "acl-icon-font"; font-weight: normal; font-style: normal; src: url("https://rawgit.com/pxsmith/icon-font-testing/master/acl-icon-font.eot"); src: url("https://rawgit.com/pxsmith/icon-font-testing/master/acl-icon-font.eot") format("eot"), url("https://rawgit.com/pxsmith/icon-font-testing/master/acl-icon-font.woff") format("woff"); src: url("https://rawgit.com/pxsmith/icon-font-testing/master/acl-icon-font.ttf") format("ttf");}@font-face{font-family: "acl-icon-font"; font-weight: normal; font-style: normal; src: url("https://rawgit.com/pxsmith/icon-font-testing/master/acl-icon-font.woff") format("woff");}@media screen and (-webkit-min-device-pixel-ratio: 0){@font-face{font-family: "acl-icon-font"; src: url("https://rawgit.com/pxsmith/icon-font-testing/master/acl-icon-font.svg") format("svg");}}</style>'); (Note: you may need to clear your cache to see your changes)
8. Using this plug-in loads new icon font even when you navigate to new pages.

ACL-UI 3 integration :rocket:

Run npm pack and upload the .tgz file to Gemfurry. (For more info check Gemfurry's docs)

Potential Issues

Important: As Bohemian Coding updates quite often, if something is not working as expected, please check the version of your software including Node and Gulp.

This project is tested with:

• Node v4.0.0 Check: node --version Install: brew install node Update: brew upgrade node
• Gulp 3.9.0 Download: npm install --global gulp-cli
• Sketch 3.4.2
• Sketchtool 3.4

License

Copyright (c) 2016 ACL Services Ltd.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.