How to use your own icon fonts in Axure
How to use your own icon fonts in Axure
If you aren’t already aware of the benefits of using icon-fonts vs using images I’ll give you a quick summary. Icon-fonts look like images but are treated as text. As such anything you can do with text such as change color, size, add shadows etc can be done with your icon-font. In Axure where you would have needed to create two or three images to achieve hover/active states for your navigation elements you can simply use the Interaction Styles to style your various interaction states. Icon-Fonts are also vector based which means that they always look crisp at any size even on high resolution displays such as Apple’s Retina displays. Another very cool thing about using icon-fonts in Axure is that if you change some of your icons in your icon-font so long as you use the same unicode for that icon the icon will automatically update with the new design when you publish it from Axure.
So let’s get started!
First thing’s first, you need your icons. For this example I’ll be using some icons I created in Illustrator for my open source project, UpUpDownDownLeftRight an icon-font based on retro video games. Feel free to download the .svg files from my Github: https://github.com/llong/videogame_icon_font. Alternatively, IcoMoon has plenty of free icon sets you can pick and choose from to bundle into your icon-font.
Note * It’s important to remember a couple things when designing icons for icon fonts.
Files must be saved at SVGs
There can be no overlapping paths in your design. If you have overlapping paths use pathfinder to join them into a single path.
Step Two - Convert Icons Into Icon-Font
Converting your SVGs into an icon-font is a breeze with IcoMoon. Head over to http://icomoon.io/app-old/.
Take a minute to look around the UI. You will notice a couple things. First you will notice that there are already quite a few icons on your screen. Second you will notice some options on the top of the screen such as Import Icons, Icon Preview Size option dropdown and 3 icons on the right, a select, a delete icon and an edit icon. I’m going to be using the icons I created in Ilustrator but feel free to use either the icons you created or the free icons provided by IcoMoon (you can even use both!).
To use your own icons click the import icons button. A file browser window will pop up. Select all the SVGs for the icons you want to import into your font. If any of your icons don’t look right double check in Illustrator(or InkScape) that you don’t have any overlapping shapes/paths.
Now we will select which icons we want to use in our font. Click the select icon and click on each of the icons you want to use (you can also click and drag).
Click the font -> icon on the bottom of the screen to generate your icon-font.
In the next screen you will see all of your icons along with some strange characters under them like U+e000. These are the unicodes for each of the icons and important. If you’ve ever used Font Awesome you may be familiar with these codes already, if not don’t worry I’ll explain what to do with them later on.
The last thing we need to do in MoonIco is name our font and download it. Click the preferences icon and give your font a name.
Now click the download button on the bottom of the screen to download your font
Extract the .zip file you just downloaded and you will see a list of files and folders. The files we are interested in in the fonts folder as well as the index.html and style.css files. If you open the index.html file you will see all of your icons laid out nicely with the associated unicode under it.
Step Three - Add Unicode Keyboard Input On Mac OS X
This step only applies to Mac users. If you’re on Windows you can simply hold down the alt key and enter in the unicode for the icon you would like to use without any extra steps.
Open open System Preferences on your Mac.
Click Keyboard then the Input Sources tab
Click the + Icon to add a new input type
Click Others and select Unicode Hex Input and finally click Add
That’s it! You now have the ability to to create unicode characters. If you look at your Menu Bar you’ll notice a Flag icon. Mine is the American Flag since my default language is American English, yours may be different if you’re language/nationality is different. If you click that icon you will see an option for Unicode Hex Input. Make sure you have this selected as your input type when we begin to type in our icons in Axure.
Step Four - Using Our Icon-Font in Axure
Ok now comes the fun part. We are going to be using our new icon-font in our Axure project.
Create a new Axure file and drag a label widget onto your project screen.
Open up index.html in your browser and find the icon you want to use. Have a look at the unicode under the icon and remember it because you need to type it in not simply copy and paste. We’re only interested in the last 4 characters (eg: e000).
With the typing cursor flashing inside your label widget in Axure hold down the alt key on your keyboard and while holding it down type in the last four unicode characters and then release the alt key.
'Hey that's not my icon!' You're right, that weird symbol is not your icon. You need to change your font on your label to your icon-font. If you want to be able to view your icon inside Axure you will to install your icon font on your computer first. Axure is smart but not quite smart enough to load web fonts inside the program itself yet. So open up the fonts folder you downloaded from MoonIco and double-click the .TTF version of your icon-font to install it on your computer. You will now be able to select your icon-font from the font list inside of Axure (If it's not showing try closing Axure and relaunching it). That weird symbol should now be whatever icon you entered the unicode for.
**Optional** Upload icon font to share with others
You may be wondering, ‘What if I want to share my design with other people, do they also need to install my icon-font?’ The answer is no if you only want to show them the prototype or wireframe inside the browser. If you are working with other designers and they want to be able to see the icons inside of Axure then yes they will still need to install the .TTF for the icon-font on their computers. To allow others to view the designs in a browser without installing the icon-font you need to do the following.
Upload your fonts folder including all the font files to a server as well as the style.css file (include the index.html file as well if other designers/developers will need to know the unicodes to use with Axure or CSS). For my example I’m my Github repository, for production usage I would not recommend doing this.
After you have uploaded your files to your server we need to tell Axure where to find them when it generates its HTML files. To do this click the Publish option on the Axure menu bar and then select Generate HTML Files.
Inside the dialog window select the Web Fonts option. Make sure the Include Web Fonts option is checked and click the + button to add your icon-font.
Enter the url for your CSS file you uploaded. In my case it was https://rawgithub.com/llong/videogame_icon_font/master/style.css.
Generate an HTML preview your project by pressing cmd + shift + p(windows ctrl + shift + p) or selecting Publish then Preview from the Axure menu bar.
That’s it! You should now be able to share your design with other people without them needing to install your icon-font. They can simply view the HTML file in their browser and all of your beautifully designed icons will be there to impress them.
