Skip to main content Skip to main navigation

Icons

Components / Atoms

(0 Total)

Modifier Classes

Positioning:

  • icon--position--left adds margin to the right of an icon when it is positioned to the left of text
  • icon--position--right adds margin to the left of an icon when it is positioned to the right of text

Rotating:

  • icon--rotate--90

Spinning animations:

  • icon--spin--clockwise
  • icon--spin--counter-clockwise

Adding Icons

For the best performance, we are adding icons as we need them to Frankie. In order to do this, we need to build our own icon font.

  • Frankie uses the Icomoon Ultimate icon set. You can download the icon set from the Franklin Street Frankie Team SharePoint group (124Mb).
  • Use the Icomoon web app to build the icon font. Login using zwinnie@mercurynewmedia.com / C*3@t1v3. Add the Icomoon Ultimate icons within the web app.
  • Upload the JSON icon manifest from the Frankie solution (located at DesignSystem\Content\fonts\frankie\Franklin Street Frankie v2.json) to create a new project within the Icomoon app.
  • Load the Franklin Street Frankie v2 project.
  • Select new icons to add. Click on Generate Font when finished.
  • On the Generate Font screen, rename your icon(s) to be more descriptive to its intended usage (and remove trailing numbers)
  • Before downloading, click on the cog to make sure the settings for the font are correct:
    • Font name: frankie
    • Class prefix: icon-
    • Class postfix: leave blank
    • Support IE8: leave unchecked
    • Include metadata in fonts: leave unchecked
    • Encode & embed font in CSS: leave unchecked
    • Generate preprocess variables for: SASS
    • Use a class: .icon
    • Em square height: 1024
    • Baseline height: 6.25
    • Whitespace width: 50
    • Metadata: leave all fields blank
    • Version: 1.0
  • Download the font. This will download a .zip file named frankie.zip.
  • Download the project JSON from the Projects screen for Franklin Street Frankie v2.
  • Open the .zip file. You will need to move the font files into the Frankie fonts folder (located at DesignSystem\Content\fonts\frankie\). DO NOT move over the SVG or TTF font file — they are no longer needed for the browsers that Frankie supports (just the .woff and .woff2 are needed).
  • Copy and paste the SASS variables and SASS icon classes into Frankie’s custom SASS.
  • Copy and paste the selection.json file into the icons.json file so that the new icons show up in the Design System documentation.
  • Copy the Franklin Street Frankie v2.json file and the frankie.zip file into the fonts folder.
  • Run the gulp task named "web:sass" to compile the SASS into CSS.
  • Run the gulp task named "dist" to move the updated files into the DesignSystem\DesignSystem folder.
  • Manually copy and paste the DesignSystem\DesignSystem folders and files into the Mercury.DesignSystem\DesignSystem folder.
  • Commit your changes and push to the repo. The build will generate a new NuGet file.
  • Update the NuGet package inside of your project (Frankie, Extranet, etc.).
  • Any new icons added should now be available in your project.

Loading...