| 1 | PatternFlyIcons font is generated using [IcoMoon](http://icomoon.io/app).
|
| 2 |
|
| 3 | Go to [Manage Projects](https://icomoon.io/app/#/projects)
|
| 4 |
|
| 5 | 
|
| 6 |
|
| 7 | Import the project `PatternFlyIcons-webfont.json` and Load it:
|
| 8 |
|
| 9 | 
|
| 10 |
|
| 11 | After the Load you should see the “PatternFlyIcons - webfont” set above the “IcoMoon - Free” set. Note that all icons in PatternFlyIcons are selected AND several icons in the IcoMoon set are also selected -keep those selections!
|
| 12 |
|
| 13 | To add new icons to the PatternFlyIcons set, click on the right-hand kabob menu and select “Import To Set”. Import the new icons/svgs/pngs:
|
| 14 |
|
| 15 | 
|
| 16 |
|
| 17 | Make sure you select the new icons in the set (click on them to give them a yellow selection border).
|
| 18 |
|
| 19 | Generate the fonts by clicking on the “Generate Font” button at the bottom of any IcoMoon webpage:
|
| 20 |
|
| 21 | 
|
| 22 |
|
| 23 | At the bottom of the “Generate Font” page, click on the “Download” button. This will download a zip file which you should expand. Goto where you expanded the downloaded zip file and copy the 4 font files in the “font” directory (PatternFlyIcons-webfont.eot, .svg, .ttf, .woff) to the patternfly repo under “dist/fonts”.
|
| 24 |
|
| 25 | When finished, return to Manage Projects, and download the updated PatternFlyIcons-webfont.json file to the root of patternfly repo.
|
| 26 |
|
| 27 | Next update the PatternFly icon test page.
|
| 28 |
|
| 29 | To start this process update “less/variables.less” add new variables with the “content” values for the new icons.
|
| 30 |
|
| 31 | Ex: @pficon-var-blueprint: "\e915";)
|
| 32 |
|
| 33 | To see the content values for the PF icons click on the demo.html in the root dir of where you expanded the pf icon zip file.
|
| 34 |
|
| 35 | Next, update "less/icons.less" and add new LESS to denote the new icons.
|
| 36 |
|
| 37 | Ex:
|
| 38 | @{icon-prefix}-blueprint:before {
|
| 39 | content: @pficon-var-blueprint;
|
| 40 | }
|
| 41 |
|
| 42 | Finally, update "tests-src/icons.html" to include the new icons.
|
| 43 |
|
| 44 | Ex:
|
| 45 | <li>
|
| 46 | <span class="pficon pficon-blueprint"></span>
|
| 47 | <span class="icon-class">pficon-blueprint</span>
|
| 48 | </li>
|
| 49 |
|
| 50 | Do a ‘grunt build’ and ‘grunt server’ and review the Icons test page to verify the new icons render correctly.
|
| 51 |
|
| 52 | Create a PR with the updated PatternFlyIcons-webfont.json file, the updated LESS files, the test-src file, and the generated font files under patternfly/dist/css and patternfly/dist/fonts.
|
| 53 |
|
| 54 | An example of a patternfly icon/font update PR is: https://github.com/patternfly/patternfly/pull/278
|