forked from FortAwesome/Font-Awesome
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adding instructions for how to contribute back to Font Awesome
- Loading branch information
Showing
6 changed files
with
97 additions
and
49 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,7 +10,7 @@ | |
| <title>Font Awesome, the iconic font designed for use with Twitter Bootstrap</title> | ||
| <meta name="description" content=""> | ||
| <meta name="author" content=""> | ||
| <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1"> | ||
| <!--<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">--> | ||
|
|
||
| <!--[if lt IE 9]> | ||
| <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | ||
|
|
@@ -685,71 +685,102 @@ <h2 class="page-header">Medical Icons <small>Want to change healthcare? Work wit | |
| <h2 class="page-header">Integration</h2> | ||
| <p>It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.</p> | ||
| <div class="row"> | ||
| <div class="span12"> | ||
| <h4>Easy Bootstrap + Font Awesome Integration</h4> | ||
| </div> | ||
| <div class="span3"> | ||
| <h4>Bootstrap using LESS</h4> | ||
| <p>Use this method if integrating with Twitter Bootstrap using LESS</p> | ||
| <p>Use this method to integrate Font Awesome with the default Bootstrap CSS.</p> | ||
| </div> | ||
| <div class="span9"> | ||
| <ol> | ||
| <li>Copy the Font Awesome font directory into your project.</li> | ||
| <li>Copy font-awesome.less into your bootstrap/less directory.</li> | ||
| <li>Open bootstrap.less and replace <code>@import "sprites.less";</code> with <code>@import "font-awesome.less";</code></li> | ||
| <li>Copy font-awesome.min.css into your project.</li> | ||
| <li> | ||
| Open your project's font-awesome.less and edit the font url to ensure it points to the right place. | ||
| Open your project's font-awesome.min.css and edit the font paths to ensure they point to the right place. | ||
| <p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your CSS directory.</p> | ||
| </li> | ||
| <li> | ||
| In the <code><head></code> of your html, reference the location to your font-awesome.min.css. | ||
| <pre class="prettyprint linenums"> | ||
| @font-face { | ||
| font-family: 'FontAwesome'; | ||
| src: url('../font/fontawesome-webfont.eot'); | ||
| src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), | ||
| url('../font/fontawesome-webfont.woff') format('woff'), | ||
| url('../font/fontawesome-webfont.ttf') format('truetype'), | ||
| url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
| <link rel="stylesheet" href="../css/bootstrap.min.css"> | ||
| <link rel="stylesheet" href="../css/font-awesome.min.css"> | ||
| </pre> | ||
| </li> | ||
| <li>Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.</li> | ||
| <li>Check out the examples to start using Font Awesome!</li> | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="span12"> | ||
| <h4>Custom Bootstrap + Font Awesome Integration using LESS</h4> | ||
| </div> | ||
| <div class="span3"> | ||
| <h4>Bootstrap using CSS</h4> | ||
| <p>Use this method if integrating with Twitter Bootstrap using CSS.</p> | ||
| <p>Use this method to integrate Font Awesome with Twitter Bootstrap using LESS.</p> | ||
| </div> | ||
| <div class="span9"> | ||
| <ol> | ||
| <li>Customize Twitter Bootstrap <a href="http://twitter.github.com/bootstrap/customize.html" target="_blank">here</a>. Make sure to uncheck the default "Icons" under "Base CSS."</li> | ||
| <li>Copy the Font Awesome font directory into your project.</li> | ||
| <li>Copy font-awesome.css into your project.</li> | ||
| <li>Open your project's font-awesome.css and edit the font url to ensure it points to the right place (see above example).</li> | ||
| <li>Copy font-awesome.less into your bootstrap/less directory.</li> | ||
| <li>Open bootstrap.less and replace <code>@import "sprites.less";</code> with <code>@import "font-awesome.less";</code></li> | ||
| <li> | ||
| In the <code><head></code> of your html, reference the location to your font-awesome.css. | ||
| Open your project's font-awesome.less and edit the <code>@FontAwesomePath</code> variable to point to your font directory. | ||
| <pre class="prettyprint linenums"> | ||
| <link rel="stylesheet" href="../css/bootstrap.css"> | ||
| <link rel="stylesheet" href="../css/font-awesome.css"> | ||
| @FontAwesomePath: "../font"; | ||
| </pre> | ||
| <p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your compiled CSS directory.</p> | ||
| </li> | ||
| <li>Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.</li> | ||
| <li>Check out the examples to start using Font Awesome!</li> | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="span3"> | ||
| <div class="span12"> | ||
| <h4>Custom Bootstrap + Font Awesome Integration using SASS or SCSS</h4> | ||
| <p>I have never used either, so let me know if the included SCSS or SASS files have issues.</p> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="span12"> | ||
| <h4>Not using Bootstrap?</h4> | ||
| </div> | ||
| <div class="span3"> | ||
| <p>Font Awesome works just as well without Twitter Bootstrap.</p> | ||
| </div> | ||
| <div class="span9"> | ||
| <ol> | ||
| <li>Copy the Font Awesome font directory into your project.</li> | ||
| <li>Copy font-awesome.less or font-awesome.css into your project.</li> | ||
| <li>Open your project's font-awesome.less or font-awesome.css and edit the font url to ensure it points to the right place (see above example).</li> | ||
| <li>Copy font-awesome.less or font-awesome.min.css into your project.</li> | ||
| <li>Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples).</li> | ||
| <li>Check out the examples to start using Font Awesome!</li> | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="span12"> | ||
| <h4>Need IE7 Support?</h4> | ||
| </div> | ||
| <div class="span3"> | ||
| <p>Font Awesome supports IE7. If you need it, you have my condolences.</p> | ||
| </div> | ||
| <div class="span9"> | ||
| <ol> | ||
| <li>Get Font Awesome working properly in a modern browser.</li> | ||
| <li>Copy font-awesome-ie7.min.css into your project.</li> | ||
| <li> | ||
| In the <code><head></code> of your html, reference the location to your font-awesome-ie7.min.css. | ||
| <pre class="prettyprint linenums"> | ||
| <link rel="stylesheet" href="../css/bootstrap.min.css"> | ||
| <link rel="stylesheet" href="../css/font-awesome.min.css"> | ||
| <!--[if IE 7]> | ||
| <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"> | ||
| <![endif]--> | ||
| </pre> | ||
| </li> | ||
| <li>Go complain to whoever decided your project needs IE7 support.</li> | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section id="examples"> | ||
|
|
@@ -1198,6 +1229,42 @@ <h4>Custom CSS</h4> | |
|
|
||
| <section id="contribute"> | ||
| <h2 class="page-header">Contribute Icons to Font Awesome</h2> | ||
| <div class="row"> | ||
| <div class="span3"> | ||
| <img class="img-rounded" src="assets/img/contribution-sample.png"> | ||
| </div> | ||
| <div class="span9"> | ||
| <p class="lead"> | ||
| Want to help make Font Awesome even more awesome? Contribute back to the Font Awesome community by designing | ||
| new pictograms for the set. | ||
| </p> | ||
| <p> | ||
| If selected, you'll retain the CC-BY license to your pictogram and get attribution | ||
| right here on the Font Awesome site. | ||
| </p> | ||
| <h3>How to Submit New Icons</h3> | ||
| <ol> | ||
| <li>Download the <a href="assets/img/icon-flag.pdf">icon-flag.pdf template</a>.</li> | ||
| <li> | ||
| Open the PDF in Adobe Illustrator. You'll notice the file has dimensions of 60x56. This is exactly 4x the | ||
| max icon size of 15 wide by 14 tall. The template is an example of the flag icon to use as a guide. | ||
| </li> | ||
| <li> | ||
| Design your icon. In order to make it into the set, your icon must look pixel perfect. The easiest way to do | ||
| this is to make sure your line widths in the template are some multiple of 4px. Diagonals are rough, too. | ||
| Don't split pixels right down the middle, as they blur more when rendering. Zoom out to 25% to get a good idea | ||
| of how it will render in the font. | ||
| </li> | ||
| <li> | ||
| Submit your icon. Drop me an email at <a href="mailto:[email protected]">[email protected]</a>. Make sure to | ||
| use the subject <code>[Font Awesome] [Icon Contribution] icon-name</code> and attach your PDF file. If your | ||
| icon makes it into Font Awesome (I'm keeping a very tight reign on quality), I'll ask what contact info you'd | ||
| like to use for attribution. | ||
| </li> | ||
| </ol> | ||
| </div> | ||
| </div> | ||
|
|
||
| </section> | ||
|
|
||
| <section id="roadmap"> | ||
|
|
@@ -1295,25 +1362,6 @@ <h4><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List | |
| </div> | ||
| </section> | ||
|
|
||
| <!--<section id="fort-awesome">--> | ||
| <!--<h2 class="page-header">Fort Awesome? Font Awesome?</h2>--> | ||
| <!--<div class="row">--> | ||
| <!--<div class="span8">--> | ||
| <!--<div class="lead">--> | ||
| <!--<p><strong>Fort Awesome</strong> is a magical place. A place of wonder and... magic. It's just like Xanadu, but without that dorky name.</p>--> | ||
| <!--<p>So magical, in fact, that <strong>Font Awesome</strong> was forged from its depths. Who can tell what may happen next...</p>--> | ||
| <!--</div>--> | ||
| <!--<small>Fort Awesome is the organization, Font Awesome is the project. It's not a spelling error.</small>--> | ||
| <!--</div>--> | ||
| <!--<div class="span4">--> | ||
| <!--<div>--> | ||
| <!--<img class="img-rounded" src="assets/img/fort_awesome.jpg">--> | ||
| <!--</div>--> | ||
| <!--<div class="caption text-align-right">Harvard Yard, 2005. © DG.</div>--> | ||
| <!--</div>--> | ||
| <!--</div>--> | ||
| <!--</section>--> | ||
|
|
||
| </div> | ||
|
|
||
| <footer> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters