Skip to content

Commit

Permalink
Important message about only using alphabetic characters
Browse files Browse the repository at this point in the history
  • Loading branch information
Heydon Pickering committed Dec 17, 2011
1 parent 2c98f5e commit 2af3691
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,15 @@ <h2>Making icons</h2>

<p>The easiest way to make icons is by using the free path editor <a href="http://inkscape.org/">Inkscape</a>'s SVG Font Editor. Open the <strong>icons.svg</strong> file from your local repository's fonts folder in Inkscape and draw away. Watching <a href="http://www.youtube.com/watch?v=_KX-e6sijGE">this video tutorial</a> will help you get familiar with the technique, but ignore the high baseline guide: Sit your glyphs on the much lower guide used in our version.</p>
<p>Once the icon has been successfully added to the master file, you can save it back to your repository, ready to be <strong>merged with other versions</strong>. Of course, you may not want to create entirely new icons. You could tweak the pathing of icons made by others or even replace icons that you don't think work very well at all.</p>

<p><em>Note:</em> Please only make or modify icons for alphabetic characters (uppercase or lowercase). Currently, the project is only supporting these characters. Only these will appear on your demo page (demo/index.html).</p>

<h2>Demoing your set</h2>

<p>Inside your repository is a page much like this one which can be used to demo your icons embedded in the page. For this to work, you currently have to manually convert the newly edited SVG font to TTF, WOFF and EOT. A service like <a href="http://www.fontsquirrel.com/fontface/generator">Font Squirrel's Generator</a> is probably the best way to do this until we have developed an automated build script. Rename the fonts in the Font Squirrel pack as <strong>icons.ttf</strong>, <strong>icons.woff</strong> and <strong>icons.eot</strong>, then replace the older files in your fonts folder.</p>

<p>To view the demo, open demo/index.html in a browser.</p>

<h2>Why collaboration?</h2>
<p>There are an increasing number of <strong>icon fonts</strong> available for use in web pages. They're much better than images for <abbr title="User Interface">UI</abbr> elements because they resize without degradation, making them great for <a href="http://www.abookapart.com/products/responsive-web-design">responsive designs</a>. However, it's hard to find a single font that covers all of the important icons is a satisfactory way.</p>
<p>By crowdsoucing icon designs there's a better chance of creating sets that cover the greatest number of use cases, featuring versions of icons that we can agree look <em>just right</em> for what they are supposed to represent.</p>
Expand Down

0 comments on commit 2af3691

Please sign in to comment.