A few hero banner design concepts that didn’t make it to production.
Newish canvas, オー！スパミルカちゃん
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!
Step One - Create icons
- 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
- 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
- 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
Step Four - Using Our Icon-Font in Axure
- 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.
Early Spring in San Francisco 2013.
Photos taken with Panasonic Lumix G5 w/ 14mm